在Vue中實現組件通信的方法有哪些

這篇文章給大家介紹在Vue中實現組件通信的方法有哪些，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

常用的通信手段有兩種：

1.ref：給元素或組件注冊引用信息

2.children:訪問父級組件和子組件的實例。

這兩種方式都是直接通過實例的方式獲取的方式。示例如下：

//comA組件A
export default {
 data () {
 return {
  title: '測試通信'
 }
 },
 methods: {
 sayHello () {
  window.alert('你好');
 }
 }
}

這里引用組件A

<template>
 <comA ref="comA"></comA>
</template>
<script>
 export default {
 mounted () {
  const comA = this.$refs.comA;
  console.log(comA.title); // 測試通信
  comA.sayHello(); // 調用組件comA的方法
 }
 }
</script>

上面的例子我們可以看出我們使用ref來獲取組件的實例上的方法和數據

<div id="count">
 <button @click="showmsg">
  顯示兩個組件的信息
 </button>
  <child1></child1>
 <child2></child2>
 </div>
<template id="child1">
 <div>
 {{ msg }}
 </div>
</template>
<template id="child2">
 <div>
 {{ msg }}
 </div>
</template>
<script>
 Vue.component('child1', {
  template: '#child1',
  data () {
  return {
   msg: '這是子組件1的信息'
  }
  }
 })
 Vue.component('child2', {
  template: '#child2',
  data () {
  return {
   msg: '這是子組件2的信息'
  }
  }
 })
 new Vue({
  el: '#count',
  data: {
  
  },
  methods: {
  showmsg () {
   for(var i = 0; i < this.$children.length; i++) {
   alert(this.$children[i].msg)
   }
  }
  }
 })
</script>

$children 返回所有子組件的實例，是一個數組

<div id="count">
 父組件中的msg: {{ msg }}
  <child1 ref='c1'></child1>
 <child2 ref='c2'></child2>
 </div>
<template id="child1">
 <div>
 {{ msg }}
 <button @click="showpmsg">
  顯示父組件msg
 </button>
 </div>
</template>
<template id="child2">
 <div>
 {{ msg }}
 </div>
</template>
<script>
 Vue.component('child1', {
  template: '#child1',
  data () {
  return {
   msg: '這是子組件1的信息'
  }
  },
  methods: {
  showpmsg () {
    alert(this.$parent.msg)
  }
  }
 })
 Vue.component('child2', {
  template: '#child2',
  data () {
  return {
   msg: '這是子組件2的信息'
  }
  }
 })
 new Vue({
  el: '#count',
  data: {
  msg: 'hello parent'
  }
 })
</script>

這兩種方式是基于組件的上下文環境訪問到父組件或者全部子組件（數組）。這種方式有很大的弊端是，無法跨級或兄弟間進行通信，比如如下的結構

// parent.vue
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>

我們假如想在組件A中獲取其他組件那么我們可能需要使用vuex或者和Bus事件總線的方式進行解決。

事件總線

定義事件總線的方式有以下兩種

// bus.js 事件總線

import Vue from 'vue'
export const $bus = new Vue()

// main.js我們再main入口中定義這個事件總線
Vue.prototype.$bus = new Vue()

發送事件

對下面comA說明，會接收來自父組件的參數number，并顯示出來；有個按鈕，點擊會調用函數handleAddRandom，生成一個隨機數，并調用事件總線的$emit方法，將隨機數給事件總線，由事件總線進行數據傳遞。

<template>
 <div>
 {{number}}
 <button @click="handleAddRandom">隨機增加</button>
 </div>
</template>

<script>
import $bus from ../bus.js
 export default {
 name: "counter",
 props: {
  number: {
  type: Number
  }
 },
 methods: {
  handleAddRandom() {
  const num = Math.floor(Math.random() * 100 + 1);
  console.log("生產的num:" + num);
  this.$bus.$emit('add', num);
  }
 }
 }
</script>

接收事件

<template>
 <div>
 隨機增加:
 <counter :number="number"></counter>
 </div>
</template>

<script>
 import counter from './counter'

 export default {
 name: "index",
 components: {
  counter
 },
 data() {
  return {
  number: 0
  }
 },
 methods: {
  handleAddRandom(num) {
  this.number += num;
  }
 },
 created() {
  //this.$bus.$on需要在created中使用，否則不會生效
  this.$bus.$on('add', this.handleAddRandom);
 },
 beforeDestroy() {
  //需要在beforeDestroy中移除
  this.$bus.$off('add', this.handleAddRandom);
 }
 }
</script>

<style scoped>

</style>

上面是我們通過事件總線的方式進行通信

然后我們來說下另一種可以媲美Vuex的一種方式provide / inject

provide / inject

說起這兩個API可能大家不太明白我們來舉例子說明

// A組件
export default {
 provide: {
 name: 'Aresn'
 }
}

// B組件
export default {
 inject: ['name'],
 mounted () {
 console.log(this.name); // Aresn
 }
}

代碼中我們可以看到我們再組件A中設置了一個provide:{name："Aresn"}，這個方法的作用就是將該變量提供給所有的子組件。我們在B組件中我們使用indect獲取了這個變量，這樣我們就可以使用this.name獲取到這個那么變量。下面我們可以使用一些騷操作大膽的替代Vuex。（這里說明一下官網中不建議我們是使用這兩個API在常規應用程序中，建議使用在高階組件中，建議歸建議用的好就可以啦）

使用provide / inject期待Vuex

<template>
 <div>
 <router-view></router-view>
 </div>
</template>
<script>
 export default {

 }
</script>
Vue cli中搭建出來的項目結構中都會有一個app.vue作為入口組件，我們可以使用這個API在上面大做文章。
<script>
 export default {
 provide () {
  return {
  app: this
  }
 },
 data () {
  return {
  userInfo: null
  }
 },
 methods: {
  getUserInfo () {
  // 這里通過 ajax 獲取用戶信息后，賦值給 this.userInfo，以下為偽代碼
  $.ajax('/user/info', (data) => {
   this.userInfo = data;
  });
  }
 },
 mounted () {
  this.getUserInfo();
 }
 }
</script>

這里我們把根組件實例作為一個參數傳遞給app變量，下面我們就可以通過app[變量||方法]達到vuex的目的

<template>
 <div>
 {{ app.userInfo }}
 </div>
</template>
<script>
 export default {
 inject: ['app'],
 methods: {
  changeUserInfo () {
  // 這里修改完用戶數據后，通知 app.vue 更新，以下為偽代碼
  $.ajax('/user/update', () => {
   // 直接通過 this.app 就可以調用 app.vue 里的方法
   this.app.getUserInfo();
  })
  }
 }
 }
</script>

但是這樣做有一個弊端那就是可能會讓根組件app.vue的代碼變得特別的臃腫，當然也有解決辦法，我們可以使用mixins混合的方式將不同的邏輯分開寫到不同的js里面然后通過 mixins: [mixins_user]的方式在app.vue中引用這個mixin。

關于在Vue中實現組件通信的方法有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。