Vue父組件向子組件傳值以及data和props的區(qū)別詳解
1.在父組件中定義 msg 屬性
data:{ msg:’123 -我是父組件中的數(shù)據(jù)’ },
2.引用子組件
父組件可以在引用子組件的時(shí)候，通過(guò)屬性綁定的形式，把需要傳遞給子組件的數(shù)據(jù)，以屬性綁定的形式，傳遞到子組件內(nèi)部，供子組件使用。
把父組件傳遞過(guò)來(lái)的 msg 屬性，綁定到子組件的 parentmsg 屬性上。
<com1 :parentmsg='msg'></com1>
3. 在子組件定義部分，需要把父組件傳遞過(guò)來(lái)的 parentmsg 屬性，先在props數(shù)組中定義一下（代表這個(gè)屬性是由父組件傳遞過(guò)來(lái)的），這樣，才能使用這個(gè)數(shù)據(jù)
props:[’parentmsg’],
4.在子組件中使用
template:'<h1>這是子組件--{{parentmsg}}</h1>',
5.子組件中data和props的區(qū)別
子組件中的data數(shù)據(jù)，不是通過(guò)父組件傳遞的是子組件私有的，是可讀可寫(xiě)的。
子組件中的所有 props中的數(shù)據(jù)，都是通過(guò)父組件傳遞給子組件的，是只讀的。
完整代碼：
<html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> </head><body> <div id=’app’> <!-- 父組件可以在引用子組件的時(shí)候，通過(guò)屬性綁定的形式，把需要傳遞給子組件的數(shù)據(jù)， 以屬性綁定的形式，傳遞到子組件內(nèi)部，供子組件使用 --> <com1 :parentmsg='msg'></com1> </div></body><script src='http://www.lshqa.cn/lib/vue.js'></script><script> var vm = new Vue({ el:’#app’, data:{ msg:’123-我是父組件中的數(shù)據(jù)’ }, components:{ //子組件中無(wú)法訪問(wèn)父組件的data和methods com1:{ //子組件中的data數(shù)據(jù)，不是通過(guò)父組件傳遞的是子組件私有的 //data上的數(shù)據(jù)，是可讀可寫(xiě)的 data(){ return { title:’123’, content:’qqq’ } }, template:'<h1>這是子組件--{{parentmsg}}</h1>', //注意，組件中的所有 props中的數(shù)據(jù)，都是通過(guò)父組件傳遞給子組件的 //只讀 props:[’parentmsg’],//把父組件傳遞過(guò)來(lái)的parentmsg屬性， //先在props數(shù)組中定義一下，這樣，才能使用這個(gè)數(shù)據(jù) methods:{ } } } })</script></html>
到此這篇關(guān)于Vue父組件向子組件傳值以及data和props的區(qū)別詳解的文章就介紹到這了,更多相關(guān)Vue父組件向子組件傳值內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. .NET SkiaSharp 生成二維碼驗(yàn)證碼及指定區(qū)域截取方法實(shí)現(xiàn)2. css代碼優(yōu)化的12個(gè)技巧3. HTTP協(xié)議常用的請(qǐng)求頭和響應(yīng)頭響應(yīng)詳解說(shuō)明（學(xué)習(xí)）4. idea設(shè)置提示不區(qū)分大小寫(xiě)的方法5. CentOS郵件服務(wù)器搭建系列—— POP / IMAP 服務(wù)器的構(gòu)建（ Dovecot ）6. ASP.NET MVC通過(guò)勾選checkbox更改select的內(nèi)容7. Django使用HTTP協(xié)議向服務(wù)器傳參方式小結(jié)8. IntelliJ IDEA創(chuàng)建web項(xiàng)目的方法9. django創(chuàng)建css文件夾的具體方法10. 原生JS實(shí)現(xiàn)記憶翻牌游戲
網(wǎng)公網(wǎng)安備