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