快捷導(dǎo)航

Vue.js組件間通信方式總結(jié)【推薦】

更新時(shí)間：2018年11月23日 08:35:21 作者：Peer1029

組件之間通信分為三種：父-子；子-父；跨級組件通信。下面，就組件間如何通信做一些總結(jié)。需要的朋友可以參考下

平時(shí)在使用Vue框架的業(yè)務(wù)開發(fā)中，組件不僅僅要把模板的內(nèi)容進(jìn)行復(fù)用，更重要的是組件之間要進(jìn)行通信。組件之間通信分為三種：父-子；子-父；跨級組件通信。下面，就組件間如何通信做一些總結(jié)。

1.父組件到子組件通過props通信

在組件中，使用選項(xiàng)props來聲明需要從父級組件接受的數(shù)據(jù)，props的值可以是兩種：一種是字符串?dāng)?shù)組，一種是對象。props中聲明的數(shù)據(jù)與組件data函數(shù)return的主要區(qū)別在于props來自父級，而data中的組件是自己的數(shù)據(jù)，作用域是組件本身，這兩種數(shù)據(jù)都可以在模板template及計(jì)算屬性computed和方法methods中使用。如以下例子：

// 父組件 ParentComponent
<template>
 <div class="parent-component">
 <h2>這是一個(gè)父組件</h2>
 <ChildComponent :parentMessage="parentMessage"/>
 </div>
</template>
<script>
 import ChildComponent from './ChildComponent'
 export default {
 name: "ParentComponent",
 data(){
  return{
  parentMessage:'這是來自父組件的數(shù)據(jù)'
  }
 },
 components:{
  ChildComponent
 }
 }
</script>
// 子組件 ChildComponent
<template>
<div class="child-component">
 <h2>這是一個(gè)子組件</h2>
 <h3>{{parentMessage}}</h3>
</div>
</template>
<script>
 export default {
 name: "ChildComponent",
 props:["parentMessage"]
 }
</script>

小結(jié)：父組件傳遞個(gè)子組件的數(shù)據(jù)可以寫死，也可以用父級的動態(tài)數(shù)據(jù)用v-bind來綁定props的值。

2.子組件到父組件通過$emit，$on通信

當(dāng)子組件需要向父組件傳遞數(shù)據(jù)時(shí)，就要用到自定義事件，v-on指令除了監(jiān)聽DOM事件外，還可以用于組件間的自定義事件，Vue組件有一套類似與觀察者模式的一套模式，子組件用$emit()來觸發(fā)事件，父組件用$on()來監(jiān)聽子組件的事件。舉個(gè)例子如下：

// ParentComponent 父組件
<template>
 <div class="parent-component">
 <h2>這是一個(gè)父組件total:{{total}}</h2>
 <ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/>
 </div>
</template>
<script>
 import ChildComponent from './ChildComponent'
 export default {
 name: "ParentComponent",
 data(){
  return{
  parentMessage:'這是來自父組件的數(shù)據(jù)',
  total:10,
  }
 },
 components:{
  ChildComponent
 },
 methods:{
  getTotal(total){
  this.total=total;
  console.log('ParentComponent total:',total);
  }
 }
 }
</script>
// ChildComponent 子組件
<template>
<div class="child-component">
 <h2>這是一個(gè)子組件</h2>
 <h3>{{parentMessage}}</h3>
 <button @click="handleAdd10">+10按鈕</button>
</div>
</template>
<script>
 export default {
 name: "ChildComponent",
 props:["parentMessage","total"],
 methods:{
  handleAdd10(){
  let total=this.total+10;
  console.log('ChildComponent $emit:');
  this.$emit('handleAdd10',total);
  }
 }
 }
</script>

結(jié)果：

上面例子中，子組件有一個(gè)按鈕，實(shí)現(xiàn)加10的效果，子組件通過props項(xiàng)來接收父組件傳入的total值，在改變total后，通過$emit把它傳給父組件，父組件定義事件@handleAdd10方法，子組件$emit()方法第一個(gè)參數(shù)是自定義事件的名稱，后面的參數(shù)是要傳的數(shù)據(jù)，對應(yīng)的父組件通過getTotal(total)來接收子組件傳遞的數(shù)據(jù)，由此子組件到父組件通信完成。

3.表單子組件到父組件通過v-model來通信(語法糖)

// ParentComponent 改動如下
**
<h2>這是一個(gè)父組件total:{{total}}</h2>
<ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/>
<InputComponent v-model="total"/>
**
<script>
import InputComponent from './InputComponent'
</script>
**
// InputComponent 子組件
<template>
 <input type="text" @input="updateValue($event)">
</template>
<script>
 export default {
 name: "InputComponent",
 methods:{
  updateValue(evt){
  this.$emit('input',evt.target.value)
  }
 }
 }
</script>

結(jié)果如下：

以上示例中：因?yàn)樽咏M件的石建明是特殊的input，在使用組件的父級，可以通過v-model來綁定數(shù)據(jù)total，這種實(shí)現(xiàn)方式也可以稱作語法糖，大大減少了父組件代碼量。

4.非父子組件通過中央事件總線(bus)來通信

在vue.js2.x中推薦使用一個(gè)空的Vue實(shí)例作為中央事件總線（bus）,先看一個(gè)例子：

// ParentComponent 父組件
<template>
 <div class="parent-component">
 {{message}}
 <br>
 <br>
 <component-a/>
 </div>
</template>

<script>
 import Vue from 'vue'
 let bus=new Vue();
 export default {
 name: "ParentComponent",
 data(){
  return{
  message:'',
  }
 },
 components:{
  componentA:{
  template:'<button @click="handleClick">傳遞事件</button>',
  methods:{
   handleClick(){
   bus.$emit('on-message','來自子組件component-a的內(nèi)容')
   }
  }
  }
 },
 mounted(){
  bus.$on('on-message',(msg)=>{
  this.message=msg;
  });
 }
 }
</script>

結(jié)果如下：

以上例子中：首先創(chuàng)建了一個(gè)bus的空Vue實(shí)例，里面沒有任何內(nèi)容，然后全局定義了組件component-a,，在父組件ParentChild的生命周期mounted鉤子函數(shù)中監(jiān)聽來自bus的事件on-message。而在組件component-a中，點(diǎn)擊按鈕會通過bus把事件on-message發(fā)出去，父組件會接受來自bus的事件，改變message的值。

這種方法巧妙輕量的實(shí)現(xiàn)了任何組件之間的通信，包括父子，兄弟，跨級組件。

5.狀態(tài)管理與Vuex與總結(jié)

在實(shí)際業(yè)務(wù)中，經(jīng)常會有跨組件共享數(shù)據(jù)的需求，如果項(xiàng)目不復(fù)雜，使用bus就能簡單的解決問題，但是使用bus在數(shù)據(jù)的管理、維護(hù)、架構(gòu)設(shè)計(jì)上還只是一個(gè)簡單的組件，在大型單頁應(yīng)用，多然開發(fā)的項(xiàng)目中，Vuex能更加優(yōu)雅和高效的完成狀態(tài)管理。