vue父元件向子元件傳遞資料prop
阿新 • • 發佈：2019-02-04
今天學習vue學到使用prop父向子傳遞資料，學了半天也沒懂什麼意思， 沒學懂==記住不（true）
查了下別人的學習經驗發現基本上都是拷貝vue官網的介紹，哎，不要臉的真多， 能咋辦 繼續研究唄
他說是父元件向子元件傳遞繫結的資料==子元件接收父元件資料， 那就逆向推理一下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue之父向子傳遞動態prop</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <!--app為父元件--> <div id="app"> <!--child是子元件--> <child v-bind:my-message="message"></child> </div> </body> <script type="text/javascript"> //建立全域性元件 child-->子元件 Vue.component('child', { // 關聯props props: ['myMessage'], template: '<p>{{myMessage}}</p>' }) var app = new Vue({ el: "#app", data: { message: "我現在是動態的" } }) </script> <style type="text/css"> #app{ text-align: center; font-size: 20px; margin-top: 20px; color: red; } </style> </html>
如果我把<div id="app"></div>看成根元件也就是父元件，把child標籤看成子元件，正常情況下我子元件顯示的內容應該是 template:"顯示的內容" 但是我今天想顯示的是父元件內如"我現在是動態的"，
在子元件中新增props:['資料名']，template:'<p>{{資料名}}</p>',之後在body中用v-bind繫結，
<child v-bind:my-message="message"></child><child v-bind:my-message="message"></child>
之後只要改變父元件資料的內容就可以了