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

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

這個(gè)例子中我們定義了一個(gè)叫money的數(shù)據(jù)為父組件上綁定了屬性m,m的值就是這個(gè)money變量，而子組件中添加點(diǎn)擊事件在你點(diǎn)擊子組件是觸發(fā)該事件，注意我們這里是直接修改的他的值（這是錯(cuò)的），這里按照慣性思維我們想的是既然數(shù)據(jù)有了我們管他什么父子組件的直接改值就可以了，但是我們可以運(yùn)行一下，就會(huì)出現(xiàn)下圖的報(bào)錯(cuò)

這里的意思是說我們不可以直接修改子組件的屬性，因?yàn)橹匦落秩緯r(shí)這個(gè)值都會(huì)被覆蓋，這里就是我們說的單向數(shù)據(jù)，如果沒有的話這個(gè)值可能會(huì)被所以修改，改到最后再看它的時(shí)候你可能都不知道是這個(gè)父組件的哪個(gè)子組件修改的值了。這里我們需要給父組件添加自定義事件，由子組件通過點(diǎn)擊時(shí)間觸發(fā)父組件的自定義事件，并根據(jù)實(shí)際情況進(jìn)行傳值，如下圖

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

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

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