最近在做vue的項(xiàng)目,發(fā)現(xiàn)項(xiàng)目中有很多功能是重復(fù)的,這時(shí)我們就需要想到將這一部分的功能做成一個(gè)組件來(lái)減少我們的代碼量,使代碼看起來(lái)更加的簡(jiǎn)潔,優(yōu)美.下面我們就來(lái)談?wù)劮庋b公共組件時(shí)遇到的一些問(wèn)題
1.父組件往子組件中傳值
這個(gè)是最簡(jiǎn)單的,首先父組件通過(guò)components引入子組件,如果要傳入子組件的值是動(dòng)態(tài)的.可以將該值雙向綁定在調(diào)用的子組件上,子組件只需要做一件事,那就是通過(guò)props接收,如下:
子組件
2.子組件往父組件傳值
可以定義一個(gè)事件來(lái)觸發(fā)響應(yīng)的$emit使父組件可以知道有事件改變,進(jìn)而接收對(duì)應(yīng)的參數(shù),如下:
子組件
3.子組件改變父組件傳來(lái)的值
正常,基于vue的單項(xiàng)數(shù)據(jù)流,子組件是不允許直接對(duì)父組件傳來(lái)的值進(jìn)行修改的,所以我們應(yīng)該避免這種直接修改父組件傳來(lái)值的操作.
當(dāng)子組件這樣來(lái)操作的話,會(huì)報(bào)
子組件3-0.png
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "realshow"這樣的錯(cuò)誤子組件3-3.png
報(bào)錯(cuò)的意思就是我上面所說(shuō)的子組件不允許修改
我們只需要這樣修改就可以了
這里需要注意一點(diǎn),就是watch這一塊兒,如果單單只通過(guò)第2步來(lái)試圖將父組件傳過(guò)來(lái)的值進(jìn)行賦值的話,子組件realnameshow這個(gè)值并不會(huì)隨著父組件realshow 的值進(jìn)行改變,因?yàn)閐ata只是一個(gè)初始值,所以我們才需要watch這個(gè)屬性來(lái)動(dòng)態(tài)的修改realnameshow這個(gè)參數(shù)
-----------------------------------------------------最近更新2019/7/24------------------------------------------------------------------
新的處理方法,用計(jì)算屬性來(lái)處理,借用getter和setter. 因?yàn)樯鲜龇椒ㄖ衱atch來(lái)監(jiān)聽(tīng)怎么看都比較好性能,能不用監(jiān)聽(tīng)就不用監(jiān)聽(tīng)嘛!對(duì)吧
好了,關(guān)于父子組件之間的傳值問(wèn)題大概就是這些,大家可以參考參考,前端菜鳥(niǎo)一個(gè),可能會(huì)有些出入,歡迎留言提出一些建議
個(gè)人創(chuàng)作,未經(jīng)允許不可擅自轉(zhuǎn)載
