vue組件中如何實現父子間的傳值

在前端框架中，vue雖說算不上使用量最多的，但是它確實是當下討論比較多的框架之一，因為其入門簡單，中文文檔較多而廣受喜愛，作為vue最重要的組成部分——組件，其發揮的重要性不言而喻，文匯軟件小編就跟大家分享下父子組件如何傳值。

首先，我們要明白在vue中組件間的數據必須都是遵循單向數據流的，即所有的數據只允許有父組件傳遞給子組件，不允許反向傳遞，這樣會防止從子組件意外變更父級組件的狀態，從而導致你的應用的數據流向難以理解，每次父級組件發生變更時，子組件中所有的 prop 都將會刷新為最新的值。好了上例子。

這個例子中我們定義了一個叫money的數據為父組件上綁定了屬性m,m的值就是這個money變量，而子組件中添加點擊事件在你點擊子組件是觸發該事件，注意我們這里是直接修改的他的值（這是錯的），這里按照慣性思維我們想的是既然數據有了我們管他什么父子組件的直接改值就可以了，但是我們可以運行一下，就會出現下圖的報錯

這里的意思是說我們不可以直接修改子組件的屬性，因為重新渲染時這個值都會被覆蓋，這里就是我們說的單向數據，如果沒有的話這個值可能會被所以修改，改到最后再看它的時候你可能都不知道是這個父組件的哪個子組件修改的值了。這里我們需要給父組件添加自定義事件，由子組件通過點擊時間觸發父組件的自定義事件，并根據實際情況進行傳值，如下圖

這里觸發了父組件的自定義事件，在父組件中修改了該值，并通過屬性將該值在傳回子組件就可以了

這里觸發了父組件的自定義事件，在父組件中修改了該值，并通過屬性將該值在傳回子組件就可以了

好了，以上就是小編分享的文章了，如想關注就來文匯軟件吧。