Vue一個例子看懂父子組件之間傳值

最近在作vue的項目,發現項目中有不少功能是重複的,這時咱們就須要想到將這一部分的功能作成一個組件來減小咱們的代碼量,使代碼看起來更加的簡潔,優美.下面咱們就來談談封裝公共組件時遇到的一些問題

1.父組件往子組件中傳值

這個是最簡單的,首先父組件經過components引入子組件,若是要傳入子組件的值是動態的.能夠將該值雙向綁定在調用的子組件上,子組件只須要作一件事,那就是經過props接收,以下:

父組件

子組件

2.子組件往父組件傳值

能夠定義一個事件來觸發響應的$emit使父組件能夠知道有事件改變,進而接收對應的參數,以下:

父組件

子組件

3.關於子組件改變父組件傳來的值

正常,基於vue的單項數據流,子組件是不容許直接對父組件傳來的值進行修改的,因此咱們應該避免這種直接修改父組件傳來值的操做.

當子組件這樣來操做的話,會報

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"這樣的錯誤

報錯的意思就是我上面所說的子組件不容許修改

咱們只須要這樣修改就能夠了

這裏須要注意一點,就是watch這一起,若是單單隻經過第2步來試圖將父組件傳過來的值進行賦值的話,子組件realnameshow這個值並不會隨着父組件realshow 的值進行改變,由於data只是一個初始值,因此咱們才須要watch這個屬性來動態的修改realnameshow這個參數

最近更新2019/7/24-----------------------------------------------------------------------------------------

新的處理方法,用計算屬性來處理,借用getter和setter. 由於上述方法中watch來監聽怎麼看都比較好性能,能不用監聽就不用監聽嘛!對吧

好了,關於父子組件之間的傳值問題大概就是這些,你們能夠參考參考,前端菜鳥一個,可能會有些出入,歡迎留言提出一些建議

我的創做,未經容許不可擅自轉載
簡書過來的圖片顯示不出來的問題已解決,歡迎https://www.jianshu.com/p/f7c...