Vue中的父子組件通訊以及使用sync同步父子組件數據

Posted on 2021-04-25 by WalkonNet

前言

父子組件通訊，可分為兩種情況：

1. 父組件向子組件中傳遞數據
2. 子組件向父組件中傳遞數據

一般情況下， 1中情況可通過props解決數據傳遞的問題，這裡就不多贅述瞭。

子組件向父組件中傳遞數據

主要談談2中情景的實現，有三種方式：

一. 通過props，父組件向子組件中傳遞數據和改變數據的函數，通過在子組件中調用父組件傳過來的函數，達到更新父組件數據（向父組件傳遞數據）的作用（子組件中需要有相應的響應事件）

二. 通過在子組件中觸發一個自定義事件（vm.$emit）,將數據作為vm.$emit方法的參數，回傳給父組件用v-on：[自定義事件]監聽的函數

三.通過ref對子組件做標記，父組件可以通過vm.$refs.[子組件的ref].[子組件的屬性/方法]這種方式直接取得子組件的數據

下面我將一一展示

一. 通過props從父向子組件傳遞函數,調用函數改變父組件數據

這裡就不做代碼展示瞭

一來是因為相對比較簡單
二來是因為這種方式顯然不是Vue中的最佳實踐（在react中倒比較常見）
想要看代碼的話可以看這裡：《【Vue】淺談Vue不同場景下組件間的數據交流》http://www.cnblogs.com/penghuwan/p/7286912.html （在兄弟組件的數據交流那一節）

二. 通過自定義事件從子組件向父組件中傳遞數據

我們可以在子組件中通過$emit(event, […參數])觸發一個自定義的事件，這樣，父組件可以在使用子組件的地方直接用 v-on來監聽子組件觸發的事件, 並且可以在監聽函數中依次取得所有從子組件傳來的參數

例如：
在子組件中某個部分寫入：

this.emit('eventYouDefined', arg);

然後你就可以在父組件的子組件模板裡監聽：
// 這裡是父組件的Template：

<Son  v-on: eventYouDefined = "functionYours" />

下面是一個實例

父組件

<template>
  <div id="father">
    <div>
       我是父組件,我接受到瞭：
      {{ text || '暫無數據'  }}
      <son v-on:sendData='getSonText'></son>
    </div>
  </div>
</template>
 
<script>
import son from './son.vue'
export default {
  data: function () {
    return {
      text: ''
    }
  },
  components: {
    son: son
  },
  methods: {
    getSonText (text) {
      this.text = text
    }
  }
}

</script>
 
<style scoped>
#father div {
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
  overflow: hidden;
}
</style>

子組件：

<template>
  <div>
    <p>我是子組件,我所擁有的數據： {{ text }}</p>
    <button @click="sendData">
      發送數據
    </button>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      text: '來自子組件的數據'
    }
  },
  methods: {
    sendData () {
      this.$emit('sendData', this.text)
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   button { float: left }
</style>

在點擊子組件中的“發送數據”按鈕前，父組件還沒有接受到數據(text為空字符串)，則通過 {{ text || ‘暫無數據’ }}將顯示默認文本：‘暫無數據’

點擊“發送數據”按鈕後:

因為sendData自定義事件被觸發，通過

this.$emit('sendData', this.text)   //此處的this指向子組件實例）

子組件的text數據被父組件中：

 <son v-on:sendData='getSonText'></son>

中的getSonText函數作為參數接傳參受到，從而完成瞭從子組件向父組件中的傳參過程

三. 通過ref屬性在父組件中直接取得子組件的數據（data）

對於我們上面講的一和二的處理情景來說，有個局限性就是它們都需要以事件機制為基礎（無論是像click那樣的原生事件還是自定義事件），而在事件發生的時候才能調用函數將數據傳遞過來

但如果子組件裡沒有類似“按鈕”的東西，因而無法制造原生事件，同時也沒辦法找到一個觸發自定義事件的時機的時候，怎麼從子組件向父組件傳遞數據呢？？

這個時候，我們就隻能從父組件中“直接取”子組件的數據瞭，借助ref屬性

ref是我們經常用到的Vue屬性，利用它可以簡單方便地從本組件的template中取得DOM實例，而實際上，如果你在父組件中為子組件設置ref的話，就可以直接通過vm.$refs.[子組件的ref].[子組件的屬性]去拿到數據啦，例如：

父組件：

<template>
  <div id="father">
    <div>
       我是父組件,我接受到瞭：
      {{ text || '暫無數據'  }}
      <button @click="getSonText()">接受數據</button>
      <son ref='son'></son>
    </div>
  </div>
</template>
 
<script>
import son from './son.vue'
export default {
  data: function () {
    return {
      text: ''
    }
  },
  components: {
    son: son
  },
  methods: {
    getSonText () {
      this.text = this.$refs.son.text
    }
  }
}

</script>
 
<style scoped>
#father div {
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
  overflow: hidden;
}
</style>

子組件：

<template>
  <div>
    <p>我是子組件,我所擁有的數據： {{ text }}</p>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      text: '來自子組件的數據'
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   button { float: left }
</style>

demo:

尚未點擊“接受數據”按鈕前：

點擊接受數據按鈕後：

通過sync實現數據雙向綁定，從而同步父子組件數據

通過以上三種方式，我想你應該能解決絕大多數父子組件通信的場景瞭，但讓我們再仔細考慮一下上面的通信場景，就會發現它們還可能存在的問題：

從子組件向父組件傳遞數據時，父子組件中的數據仍不是每時每刻都同步的

但在某些特殊的需求場景下，我們可能會希望父子組件中的數據時刻保持同步，這時候你可能會像下面這樣做：

這是父組件中的template:

<son :foo="bar" v-on:update="val => bar = val"></son>

在子組件中，我們通過props聲明的方式接收foo並使用

props: {
     foo: [type]
}

同時每當子組件中數據改變的時候,通過

this.$emit('update', newValue)

把參數newValue傳遞給父組件template中監聽函數中的”val”。然後通過

val => bar = val

這個表達式就實現瞭bar = newValue. 這個時候，我們發現父組件中的關鍵數據bar被子組件改變（相等）瞭！

通過數據的雙向綁定，父（組件）可以修改子的數據，子也可以修改父的數據

Vue提供瞭sync修飾符簡化上面的代碼，例如：

<comp :foo.sync="bar"></comp>

會被擴展為：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

然後你需要在子組件中改變父組件數據的時候，需要觸發以下的自定義事件:

this.$emit("update:foo", newValue)

【註意】你可能覺得這好像和我上面提到的二中的“通過自定義事件（emit）從子組件向父組件中傳遞數據”的那一節的內容似乎重疊瞭，。

然而並不是，兩者有著父子組件關系上的不同，下面我通過一行關鍵的代碼證明它們的區別所在

1.在我們講解sync的這一小節裡，自定義事件發生時候運行的響應表達式是：
<son :foo=”bar” v-on:update=”val => bar = val”></son> 中的 “val => bar = val”

2.在二中的“通過自定義事件從子組件向父組件中傳遞數據” 裡，自定義事件發生時候運行的響應表達式是:
<Son v-on: eventYouDefined = “arg => functionYours(arg)” /> 中的 “arg => functionYours(arg)”

對前者，表達式 val => bar = val意味著強制讓父組件的數據等於子組件傳遞過來的數據，這個時候，我們發現父子組件的地位是平等的。父可以改變子（數據），子也可以改變父（數據）

對後者，你的functionYours是在父組件中定義的，在這個函數裡，你可以對從子組件接受來的arg數據做任意的操作或處理，決定權完全落在父組件中，也就是：父可以改變子（數據），但子不能直接改變父（數據）！，父中數據的變動隻能由它自己決定

下面是一個展示demo:

父組件：

<template>
  <div id="father">
    <div>
       我是父組件
      <son
        :wisdom.sync="wisdom"
        :magic.sync="magic"
        :attack.sync="attack"
        :defense.sync="defense">
      </son>
      <p>智力： {{ wisdom }}</p>
      <p>膜法： {{ magic }}</p>
      <p>攻擊： {{ attack }}</p>
      <p>防禦： {{ defense }}</p>
    </div>
  </div>
</template>
 
<script>
import son from './son.vue'
export default {
  data: function () {
    return {
      wisdom: 90,
      magic: 160,
      attack: 100,
      defense: 80
    }
  },
  components: {
    son: son
  }
}

</script>
 
<style scoped>
#father div {
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
  overflow: hidden;
}
</style>

子組件：

<template>
  <div>
    <p>我是子組件</p>
    <p>智力： {{ wisdom }}</p>
    <p>膜法： {{ magic }}</p>
    <p>攻擊： {{ attack }}</p>
    <p>防禦： {{ defense }}</p>
    <button @click="increment('wisdom')">增加智力</button>
    <button @click="increment('magic')">增加膜法</button>
    <button @click="increment('attack')">增加攻擊</button>
    <button @click="increment('defense')">增加防禦</button>
  </div>
</template>
 
<script>
export default {
  props: {
    wisdom: Number,
    magic: Number,
    attack: Number,
    defense: Number
  },

  methods: {
    increment (dataName) {
      let newValue = this[dataName] + 1
      this.$emit(`update:${dataName}`, newValue)
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   button { float: left }
</style>

點擊前

點擊增加子組件中“增加智力”按鈕的時候，父組件和子組件中的智力參數同時從90變為91

點擊增加子組件中“增加膜法”按鈕的時候，父組件和子組件中的智力參數同時從160變為161

數據雙向綁定是把雙刃劍

從好處上看：

1.它實現瞭父子組件數據的“實時”同步，在某些數據場景下可能會使用到這一點
2.sync提供的語法糖使得雙向綁定的代碼變得很簡單

從壞處上看：

它破環瞭單向數據流的簡潔性，這增加瞭分析數據時的難度

當sync修飾的prop是個對象

我們對上面的例子修改一下，把數據包裹在一個對象中傳遞下來：

父組件

<template>
  <div id="father">
    <div>
       我是父組件
      <son :analysisData.sync="analysisData">
      </son>
      <p>智力： {{ analysisData.wisdom }}</p>
      <p>膜法： {{ analysisData.magic }}</p>
      <p>攻擊： {{ analysisData.attack }}</p>
      <p>防禦： {{ analysisData.defense }}</p>
    </div>
  </div>
</template>
 
<script>
import son from './son.vue'
export default {
  data: function () {
    return {
      analysisData: {
        wisdom: 90,
        magic: 160,
        attack: 100,
        defense: 80
      }
    }
  },
  components: {
    son: son
  }
}

</script>
 
<style scoped>
#father div {
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
  overflow: hidden;
}
</style>

子組件

<template>
  <div>
    <p>我是子組件</p>
    <p>智力： {{ analysisData.wisdom }}</p>
    <p>膜法： {{ analysisData.magic }}</p>
    <p>攻擊： {{ analysisData.attack }}</p>
    <p>防禦： {{ analysisData.defense }}</p>
    <button @click="increment('wisdom')">增加智力</button>
    <button @click="increment('magic')">增加膜法</button>
    <button @click="increment('attack')">增加攻擊</button>
    <button @click="increment('defense')">增加防禦</button>
  </div>
</template>
 
<script>
export default {
  props: {
    analysisData: Object
  },

  methods: {
    increment (dataName) {
      let newObj = JSON.parse(JSON.stringify(this.analysisData))
      newObj[dataName] += 1
      this.$emit('update:analysisData', newObj)
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   button { float: left }
</style>

demo同上

不要通過在子組件中修改引用類型props達到“父子組件數據同步”的需求！

父組件的數據傳遞給子組件，一般通過props實現，而在實現“父子組件數據同步”這一需求的時候，小夥伴們可能會發現一點：在子組件中修改引用類型的props（如數組和對象）是可行的

1.不僅可以達到同時修改父組件中的數據（因為本來引用的就是同一個數據）
2.而且還不會被Vue的檢測機制發現！（不會報錯）

但千萬不要這樣做，這樣會讓數據流變得更加難以分析，如果你嘗試這樣做，上面的做法可能會更好一些
不要這樣做，糟糕的做法：

父組件:

<template>
  <div id="father">
    <div>
       我是父組件
      <son :analysisData="analysisData">
      </son>
      <p>智力： {{ analysisData.wisdom }}</p>
      <p>膜法： {{ analysisData.magic }}</p>
      <p>攻擊： {{ analysisData.attack }}</p>
      <p>防禦： {{ analysisData.defense }}</p>
    </div>
  </div>
</template>
 
<script>
import son from './son.vue'
export default {
  data: function () {
    return {
      analysisData: {
        wisdom: 90,
        magic: 160,
        attack: 100,
        defense: 80
      }
    }
  },
  components: {
    son: son
  }
}

</script>
 
<style scoped>
#father div {
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
  overflow: hidden;
}
</style>

子組件：

<template>
  <div>
    <p>我是子組件</p>
    <p>智力： {{ analysisData.wisdom }}</p>
    <p>膜法： {{ analysisData.magic }}</p>
    <p>攻擊： {{ analysisData.attack }}</p>
    <p>防禦： {{ analysisData.defense }}</p>
    <button @click="increment ('wisdom')">增加智力</button>
    <button @click="increment ('magic')">增加膜法</button>
    <button @click="increment ('attack')">增加攻擊</button>
    <button @click="increment ('defense')">增加防禦</button>
  </div>
</template>
 
<script>
export default {
  props: {
    analysisData: Object
  },

  methods: {
    increment (dataName) {
      let obj = this.analysisData
      obj[dataName] += 1
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   button { float: left }
</style>

以上就是Vue中的父子組件通訊以及使用sync同步父子組件數據的詳細內容，更多關於Vue的資料請關註WalkonNet其它相關文章！

Vue中的父子組件通訊以及使用sync同步父子組件數據

前言

子組件向父組件中傳遞數據

一. 通過props從父向子組件傳遞函數,調用函數改變父組件數據

二. 通過自定義事件從子組件向父組件中傳遞數據

三. 通過ref屬性在父組件中直接取得子組件的數據（data）

通過sync實現數據雙向綁定，從而同步父子組件數據

數據雙向綁定是把雙刃劍

當sync修飾的prop是個對象

不要通過在子組件中修改引用類型props達到“父子組件數據同步”的需求！

推薦閱讀：

發佈留言取消回覆

近期文章

前言

子組件向父組件中傳遞數據

一. 通過props從父向子組件傳遞函數,調用函數改變父組件數據

二. 通過自定義事件從子組件向父組件中傳遞數據

三. 通過ref屬性在父組件中直接取得子組件的數據（data）

通過sync實現數據雙向綁定， 從而同步父子組件數據

數據雙向綁定是把雙刃劍

當sync修飾的prop是個對象

不要通過在子組件中修改引用類型props達到“父子組件數據同步”的需求！

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

通過sync實現數據雙向綁定，從而同步父子組件數據

發佈留言取消回覆