vue元件—父元件向子元件傳值（通過屬性繫結）
阿新 • • 發佈：2018-12-12
注意：
1.資料繫結時，可能由於某種命名的規範方法或者屬性名字不能是帶有駝峰或者連字元的。並且繫結之後，還要放到子元件的
props資料後，方可呼叫。
2.子元件呼叫的父元件的屬性，只能讀不能寫。同時，子元件的屬性是其私有的，Ajax請求返回data屬性變化也只是子元件私有的
HTML程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/vue.js"></script> </head> <body> <div id="app"> <com1 v-bind:extendmsg="msg"></com1> <!--父元件在呼叫子元件時候，可以通過資料繫結的形式，傳值為子元件--> <!--注意：繫結的方法或者屬性名字不能是帶有駝峰或者連字元的，可能是命令規範--> </div> <script> var vm = new Vue({ el:'#app', data:{ msg:'com1的父元件data屬性的資料' }, methods:{}, components:{ com1:{ template:'<h3>vm例項的子元件 +++ {{ extendmsg }}</h3>', //執行時出現錯誤，預設無法訪問父元件的元素 props:['extendmsg'] //props:道具 只有繫結過後並在其中定義過，子元件才能使用父元件的某些屬性 //這裡的資料，只可讀不可寫 } } }); </script> </body> </html>
效果：
