哈嘍！大家好！我是木瓜太香，一位老牌兒前端工程師，平時(shí)我們?cè)谑褂?vue 開發(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)樵?vue 中我們的數(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)用，接下來我們來上代碼。

父組件 Father.vue

<template>
  <div class="father">
    <h1>父組件維護(hù)的狀態(tài)：{{food}}</h1>
    <son :food="food" @update:food="f => food = f"></son>
  </div>
</template>

子組件 Son.vue

<template>
  <div class="son">
    <h2>子組件中維護(hù)的狀態(tài)：{{innerFood}}</h2>
    <button @click="innerFood = '100斤牛肉'">點(diǎn)擊更改子組件狀態(tài)</button>
  </div>
</template>
<script>
  export default {
    data () {
     return {
       innerFood: this.food
     } 
    },
    props: {
      food: String
    },
    watch: {
      innerFood (nv) {
        this.$emit("update:food",nv)
      }
    }
  }
</script>

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

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

<template>
  <div class="son">
    <h2>子組件中維護(hù)的狀態(tài)：{{innerFood}}</h2>
    <button @click="innerFood = '100斤牛肉'">點(diǎn)擊更改子組件狀態(tài)</button>
  </div>
</template>
<script>
  export default {
    props: {
      food: String
    },
    computed: {
      innerFood: {
        get () {
          return this.food
        },
        set (nv) {
          this.$emit("update:food",nv)
        }
      }
    }
  }
</script>

好了，兩種寫法我們都已經(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)化后的父組件

<template>
  <div class="father">
    <h1>父組件維護(hù)的狀態(tài)：{{food}}</h1>
    <son :food="food" @update:food="food = $event"></son>
  </div>
</template>

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

<template>
  <div class="father">
    <h1>父組件維護(hù)的狀態(tài)：{{food}}</h1>
    <son :food.sync="food"></son>
  </div>
</template>

到此我們就真的完成了父子組件的同步，當(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 就不合適了。

到此這篇關(guān)于詳解vue父子組件狀態(tài)同步的最佳方式的文章就介紹到這了,更多相關(guān)vue父子組件狀態(tài)同步 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論