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>
可能我寫的也是看不懂,但是把根元件看成父元件, 註冊的元件看成子元件,在根元件裡面的子元件想顯示父元件的資料,那就在註冊的子元件中新增props:['名字'],之後把這個名字在template中使用,之後再子元件標籤中使用,比如<child v-bind:my-message="message"></child>
之後只要改變父元件資料的內容就可以了