版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。 本文鏈接：https://blog.csdn.net/xukongjing1/article/details/82457585 1.在父組件中定義 msg 屬性 data:{ msg:'123 -我是父組件中的數據' }, 2.引用子組件 父組件可以在引用子組件的時候，通過屬性綁定的形式，把需要傳遞給子組件的數據，以屬性綁定的形式，傳遞到子組件內部，供子組件使用。 把父組件傳遞過來的 msg 屬性，綁定到子組件的 parentmsg 屬性上。 <com1 :parentmsg="msg"></com1> 3. 在子組件定義部分，需要把父組件傳遞過來的 parentmsg 屬性，先在props數組中定義一下（代表這個屬性是由父組件傳遞過來的），這樣，才能使用這個數據 props:['parentmsg'], 4.在子組件中使用 template:"<h1>這是子組件--{{parentmsg}}</h1>", 5.子組件中data和props的區別 子組件中的data數據，不是通過父組件傳遞的是子組件私有的，是可讀可寫的。 子組件中的所有 props中的數據，都是通過父組件傳遞給子組件的，是只讀的。 完整代碼： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='app'> <!-- 父組件可以在引用子組件的時候，通過屬性綁定的形式，把需要傳遞給子組件的數據， 以屬性綁定的形式，傳遞到子組件內部，供子組件使用 --> <com1 :parentmsg="msg"></com1> </div> </body> <script src="../lib/vue.js"></script> <script> var vm = new Vue({ el:'#app', data:{ msg:'123-我是父組件中的數據' }, components:{ //子組件中無法訪問父組件的data和methods com1:{ //子組件中的data數據，不是通過父組件傳遞的是子組件私有的 //data上的數據，是可讀可寫的 data(){ return { title:'123', content:'qqq' } }, template:"<h1>這是子組件--{{parentmsg}}</h1>", //注意，組件中的所有 props中的數據，都是通過父組件傳遞給子組件的 //只讀 props:['parentmsg'],//把父組件傳遞過來的parentmsg屬性， //先在props數組中定義一下，這樣，才能使用這個數據 methods:{ } } } }) </script> </html> ———————————————— 版權聲明：本文為CSDN博主「北海之靈」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/xukongjing1/article/details/82457585