Vue中父元件向子元件傳值
阿新 • • 發佈：2018-11-03
Vue中父元件向子元件傳值
相關Html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue-2.4.0.js"></script> <style> </style> </head> <body> <div id="app"> <!--父元件可以在引用子元件的時候,通過屬性繫結的形式(v-bind:),--> <!--把需要傳遞給子元件的資料,以屬性繫結的形式傳遞到子元件中 給子元件使用--> <com1 v-bind:parentmsg="msg"></com1> </div> <script> var vm = new Vue({ el: '#app', data: { msg:'123-父元件中的資料' }, components: { // 注意:子元件中的data資料是子元件私有的 data:function () { return{ title:'123' } }, //發現子元件中預設無法訪問到父元件的data的資料和methods中的方法 com1: { template:'<h1>這個是子元件---{{parentmsg}}</h1>', //注意:組建中的所有props中的資料都是通過父元件傳遞給子元件的 //注意:通過props傳過來的資料都是隻讀的 而data中的資料是可讀可寫的 props:['parentmsg']//吧父元件傳遞過來的parentmsg屬性先在props中定義,這樣才能使用陣列 } } }); </script> </body> </html>