平時(shí)我們?cè)谑褂肰ue開發(fā)的時(shí)候，可能會(huì)遇到需要父組件與子組件某個(gè)狀態(tài)需要同步的情況，通常這個(gè)是因?yàn)槲覀兎庋b組件的時(shí)候有一個(gè)相同的狀態(tài)外面要用，里面也要用，今天我們就來看看怎么優(yōu)雅的解決這個(gè)問題吧!

一般來說我們實(shí)現(xiàn)這個(gè)功能，只需要父組件通過 props 傳遞給子組件就好了，但是理想很豐滿，現(xiàn)實(shí)很骨感，如果我們直接在子組件更改傳進(jìn)來的 props ，不出意外瀏覽器會(huì)給你一坨大紅色的報(bào)錯(cuò)，因?yàn)樵赩ue中我們的數(shù)據(jù)流動(dòng)是自上而下的，而子組件直接更改父組件傳來的 props 則是自下而上的數(shù)據(jù)流動(dòng)，這是Vue不允許的。

所以通常我們的解決辦法是，父組件通過 props 傳入狀態(tài)給子組件，子組件通過 props 來初始化另外一個(gè)內(nèi)部的狀態(tài)，子組件每次更改狀態(tài)之后都通知父組件，然后由父組件來更改自己的狀態(tài)，其實(shí)就是 props on emit 的應(yīng)用，接下來我們來上代碼。

需要以下資料私信回復(fù)『1』免費(fèi)獲取哦~

父組件 Father.vue

?????????

父組件維護(hù)的狀態(tài)：{{food}}

?????????food?=?f">????

子組件 Son.vue

?????????

子組件中維護(hù)的狀態(tài)：{{innerFood}}

????????點(diǎn)擊更改子組件狀態(tài)????

可以看到我們上述的寫法，其實(shí)是維護(hù)了父子組件中的不同的兩個(gè)狀態(tài)，我們做的工作只是將這兩個(gè)狀態(tài)同步了，這種寫法沒有任何問題，其實(shí)對(duì)于子組件的部分我們也可以通過 computed 來實(shí)現(xiàn)，下面我們來看一看另一種子組件內(nèi)維護(hù)同步狀態(tài)的方法：

子組件 Son.vue 的另一種寫法

?????????

子組件中維護(hù)的狀態(tài)：{{innerFood}}

????????點(diǎn)擊更改子組件狀態(tài)????

好了，兩種寫法我們都已經(jīng)演示完畢，現(xiàn)在我們來優(yōu)化一下父組件中的寫法。

父組件中可以看到我們之前在上面綁定了一個(gè) update:food 事件，并且使用箭頭函數(shù)做了一個(gè)賦值，其實(shí)這里我們可以稍微優(yōu)化一下，不要箭頭函數(shù)直接賦值，因?yàn)槲覀冇|發(fā)的是自定義事件，而我們觸發(fā)的時(shí)候給的第一個(gè)參數(shù)就是新值，我們可以直接通過 $event 拿到這個(gè)值，所以可以寫成如下形式：

優(yōu)化后的父組件

?????????

父組件維護(hù)的狀態(tài)：{{food}}

????????????

到這里你以為就結(jié)束了？其實(shí)我們還可以更近一步，只要滿足我們以上的事件命名方式，我們實(shí)際上可以使用 sync 修飾符代替事件的綁定，也就是我們不用寫事件綁定了，但是子組件內(nèi)部的事件觸發(fā)依然不能少，最終優(yōu)化的結(jié)果如下：

?????????

父組件維護(hù)的狀態(tài)：{{food}}

????????????

到此我們就真的完成了父子組件的同步，當(dāng)然在子組件中維護(hù)一個(gè)狀態(tài)不一定是必須的，如果我們只用父組件傳給我們的 props 做展示，而子組件沒有對(duì)這個(gè) props 直接更改的行為，那么我們就不用在子組件創(chuàng)建另外一個(gè)狀態(tài)，我們子組件想改他的時(shí)候只需要在合適的時(shí)機(jī)提交合適的事件即可，但是有一種情況我們不得不在子組件中創(chuàng)建另一個(gè)狀態(tài)，就是我們父組件傳入的狀態(tài)在子組件中用于 v-model 這種雙向數(shù)據(jù)綁定的功能時(shí)，由于 v-model 會(huì)自動(dòng)更改值所以直接填入從父組件接受的 props 就不合適了。

作者：木瓜太香 原文出處：博客園

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

總結(jié)

以上是生活随笔為你收集整理的vue 父组建获取子组建方法为获得_Vue父子组件状态同步的最佳方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。