哈嘍！大家好！我是木瓜太香，一位老牌兒前端工程師，平時我們在使用 vue 開發的時候，可能會遇到需要父組件與子組件某個狀態需要同步的情況，通常這個是因為我們封裝組件的時候有一個相同的狀態外面要用，里面也要用，今天我們就來看看怎么優雅的解決這個問題吧!
一般來說我們實作這個功能，只需要父組件通過 props 傳遞給子組件就好了，但是理想很豐滿，現實很骨感，如果我們直接在子組件更改傳進來的 props ，不出意外瀏覽器會給你一坨大紅色的報錯，因為在 vue 中我們的資料流動是自上而下的，而子組件直接更改父組件傳來的 props 則是自下而上的資料流動，這是 vue 不允許的，
所以通常我們的解決辦法是，父組件通過 props 傳入狀態給子組件，子組件通過 props 來初始化另外一個內部的狀態，子組件每次更改狀態之后都通知父組件，然后由父組件來更改自己的狀態，其實就是 props on emit 的應用，接下來我們來上代碼，
父組件 Father.vue
<template>
<div class="father">
<h1>父組件維護的狀態：{{food}}</h1>
<son :food="food" @update:food="f => food = f"></son>
</div>
</template>
子組件 Son.vue
<template>
<div class="son">
<h2>子組件中維護的狀態：{{innerFood}}</h2>
<button @click="innerFood = '100斤牛肉'">點擊更改子組件狀態</button>
</div>
</template>
<script>
export default {
data () {
return {
innerFood: this.food
}
},
props: {
food: String
},
watch: {
innerFood (nv) {
this.$emit("update:food",nv)
}
}
}
</script>
可以看到我們上述的寫法，其實是維護了父子組件中的不同的兩個狀態，我們做的作業只是將這兩個狀態同步了，這種寫法沒有任何問題，其實對于子組件的部分我們也可以通過 computed 來實作，下面我們來看一看另一種子組件內維護同步狀態的方法：
子組件 Son.vue 的另一種寫法
<template>
<div class="son">
<h2>子組件中維護的狀態：{{innerFood}}</h2>
<button @click="innerFood = '100斤牛肉'">點擊更改子組件狀態</button>
</div>
</template>
<script>
export default {
props: {
food: String
},
computed: {
innerFood: {
get () {
return this.food
},
set (nv) {
this.$emit("update:food",nv)
}
}
}
}
</script>
好了，兩種寫法我們都已經演示完畢，現在我們來優化一下父組件中的寫法，
父組件中可以看到我們之前在上面系結了一個 update:food 事件，并且使用箭頭函式做了一個賦值，其實這里我們可以稍微優化一下，不要箭頭函式直接賦值，因為我們觸發的是自定義事件，而我們觸發的時候給的第一個引數就是新值，我們可以直接通過 $event 拿到這個值，所以可以寫成如下形式：
優化后的父組件
<template>
<div class="father">
<h1>父組件維護的狀態：{{food}}</h1>
<son :food="food" @update:food="food = $event"></son>
</div>
</template>
到這里你以為就結束了？其實我們還可以更近一步，只要滿足我們以上的事件命名方式，我們實際上可以使用 sync 修飾符代替事件的系結，也就是我們不用寫事件系結了，但是子組件內部的事件觸發依然不能少，最終優化的結果如下：
<template>
<div class="father">
<h1>父組件維護的狀態：{{food}}</h1>
<son :food.sync="food"></son>
</div>
</template>
到此我們就真的完成了父子組件的同步，當然在子組件中維護一個狀態不一定是必須的，如果我們只用父組件傳給我們的 props 做展示，而子組件沒有對這個 props 直接更改的行為，那么我們就不用在子組件創建另外一個狀態，我們子組件想改他的時候只需要在合適的時機提交合適的事件即可，但是有一種情況我們不得不在子組件中創建另一個狀態，就是我們父組件傳入的狀態在子組件中用于 v-model 這種雙向資料系結的功能時，由于 v-model 會自動更改值所以直接填入從父組件接受的 props 就不合適了，
有前端問題需要討論的可以加我的qun:237871108，也可以通過嗶哩嗶哩搜索木瓜太香找到我，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/949.html
標籤：JavaScript
上一篇：JS 運行機制