Vue父組件向子組件傳值以及data和props的區別詳解
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='http://m.lshqa.cn/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>
到此這篇關于Vue父組件向子組件傳值以及data和props的區別詳解的文章就介紹到這了,更多相關Vue父組件向子組件傳值內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
1. Java發送http請求的示例(get與post方法請求)2. JS繪圖Flot如何實現動態可刷新曲線圖3. springboot基于Redis發布訂閱集群下WebSocket的解決方案4. 關于探究python中sys.argv時遇到的問題詳解5. 基于android studio的layout的xml文件的創建方式6. CSS自定義滾動條樣式案例詳解7. 使用ProcessBuilder調用外部命令，并返回大量結果8. Intellij IDEA官方最完美編程字體Mono使用9. python使用requests庫爬取拉勾網招聘信息的實現10. IDEA項目的依賴(pom.xml文件)導入問題及解決
網公網安備