Vue組件間通訊6種方式

時間  2019-12-04
標籤 vue 組件 通訊 方式 简体版
原文   原文鏈接

摘要： 總有一款合適的通訊方式。javascript

Fundebug經受權轉載，版權歸原做者全部。html

前言

組件是 vue.js 最強大的功能之一，而組件實例的做用域是相互獨立的，這就意味着不一樣組件之間的數據沒法相互引用。通常來講，組件能夠有如下幾種關係：前端

如上圖所示，A 和 B、B 和 C、B 和 D 都是父子關係，C 和 D 是兄弟關係，A 和 C 是隔代關係（可能隔多代）。vue

針對不一樣的使用場景，如何選擇行之有效的通訊方式？這是咱們所要探討的主題。本文總結了 vue 組件間通訊的幾種方式，如 props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和 provide/inject，以通俗易懂的實例講述這其中的差異及使用場景，但願對小夥伴有些許幫助。java

本文的代碼請猛戳github 博客，紙上得來終覺淺，你們動手多敲敲代碼！git

方法1、props/$emit

父組件 A 經過 props 的方式向子組件 B 傳遞，B to A 經過在 B 組件中 $emit, A 組件中 v-on 的方式實現。github

1. 父組件向子組件傳值

接下來咱們經過一個例子，說明父組件如何向子組件傳遞值：在子組件 Users.vue 中如何獲取父組件 App.vue 中的數據 users:["Henry","Bucky","Emily"]web

//App.vue父組件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定義名稱便於子組件調用，後者要傳遞數據名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}
//users子組件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍歷傳遞過來的值，而後呈現到頁面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //這個就是父組件中子標籤自定義名字
      type:Array,
      required:true
    }
  }
}
</script>

總結：父組件經過 props 向下傳遞數據給子組件。注：組件中的數據共有三種形式：data、props、computedvuex

2. 子組件向父組件傳值（經過事件形式）

接下來咱們經過一個例子，說明子組件如何向父組件傳遞值：當咱們點擊「Vue.js Demo」後，子組件向父組件傳遞值，文字由原來的「傳遞的是一個值」變成「子向父組件傳值」，實現子組件向父組件值的傳遞。小程序

// 子組件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//綁定一個點擊事件
  </header>
</template>
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父組件傳值");//自定義事件  傳遞值「子向父組件傳值」
    }
  }
}
</script>
// 父組件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//與子組件titleChanged自定義事件保持一致
   // updateTitle($event)接受傳遞過來的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"傳遞的是一個值"
    }
  },
  methods:{
    updateTitle(e){   //聲明這個函數
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

總結：子組件經過 events 給父組件發送消息，實際上就是子組件把本身的數據發送到父組件。

方法2、$emit/$on

這種方法經過一個空的 Vue 實例做爲中央事件總線（事件中心），用它來觸發事件和監聽事件,巧妙而輕量地實現了任何組件間的通訊，包括父子、兄弟、跨級。當咱們的項目比較大時，能夠選擇更好的狀態管理解決方案 vuex。

1.具體實現方式：

var Event=new Vue();
    Event.$emit(事件名,數據);
    Event.$on(事件名,data => {});

2.舉個例子

假設兄弟組件有三個，分別是 A、B、C 組件，C 組件如何獲取 A 或者 B 組件的數據

<div id="itany">
	<my-a></my-a>
	<my-b></my-b>
	<my-c></my-c>
</div>
<template id="a">
  <div>
    <h3>A組件：{{name}}</h3>
    <button @click="send">將數據發送給C組件</button>
  </div>
</template>
<template id="b">
  <div>
    <h3>B組件：{{age}}</h3>
    <button @click="send">將數組發送給C組件</button>
  </div>
</template>
<template id="c">
  <div>
    <h3>C組件：{{name}}，{{age}}</h3>
  </div>
</template>
<script>
var Event = new Vue();//定義一個空的Vue實例
var A = {
	template: '#a',
	data() {
	  return {
	    name: 'tom'
	  }
	},
	methods: {
	  send() {
	    Event.$emit('data-a', this.name);
	  }
	}
}
var B = {
	template: '#b',
	data() {
	  return {
	    age: 20
	  }
	},
	methods: {
	  send() {
	    Event.$emit('data-b', this.age);
	  }
	}
}
var C = {
	template: '#c',
	data() {
	  return {
	    name: '',
	    age: ""
	  }
	},
	mounted() {//在模板編譯完成後執行
	 Event.$on('data-a',name => {
	     this.name = name;//箭頭函數內部不會產生新的this，這邊若是不用=>,this指代Event
	 })
	 Event.$on('data-b',age => {
	     this.age = age;
	 })
	}
}
var vm = new Vue({
	el: '#itany',
	components: {
	  'my-a': A,
	  'my-b': B,
	  'my-c': C
	}
});
</script>

$on 監聽了自定義事件 data-a 和 data-b，由於有時不肯定什麼時候會觸發事件，通常會在 mounted 或 created 鉤子中來監聽。

方法3、vuex

1. 簡要介紹 Vuex 原理

Vuex 實現了一個單向數據流，在全局擁有一個 State 存放數據，當組件要更改 State 中的數據時，必須經過 Mutation 進行，Mutation 同時提供了訂閱者模式供外部插件調用獲取 State 數據的更新。而當全部異步操做(常見於調用後端接口異步獲取更新數據)或批量的同步操做須要走 Action，但 Action 也是沒法直接修改 State 的，仍是須要經過 Mutation 來修改 State 的數據。最後，根據 State 的變化，渲染到視圖上。

2. 簡要介紹各模塊在流程中的功能：

  • Vue Components：Vue 組件。HTML 頁面上，負責接收用戶操做等交互行爲，執行 dispatch 方法觸發對應 action 進行迴應。
  • dispatch：操做行爲觸發方法，是惟一能執行 action 的方法。
  • actions：操做行爲處理模塊,由組件中的$store.dispatch('action 名稱', data1)來觸發。而後由 commit()來觸發 mutation 的調用 , 間接更新 state。負責處理 Vue Components 接收到的全部交互行爲。包含同步/異步操做，支持多個同名方法，按照註冊的順序依次觸發。向後臺 API 請求的操做就在這個模塊中進行，包括觸發其餘 action 以及提交 mutation 的操做。該模塊提供了 Promise 的封裝，以支持 action 的鏈式觸發。
  • commit：狀態改變提交操做方法。對 mutation 進行提交，是惟一能執行 mutation 的方法。
  • mutations：狀態改變操做方法，由 actions 中的commit('mutation 名稱')來觸發。是 Vuex 修改 state 的惟一推薦方法。該方法只能進行同步操做，且方法名只能全局惟一。操做之中會有一些 hook 暴露出來，以進行 state 的監控等。
  • state：頁面狀態管理容器對象。集中存儲 Vue components 中 data 對象的零散數據，全局惟一，以進行統一的狀態管理。頁面顯示所需的數據從該對象中進行讀取，利用 Vue 的細粒度數據響應機制來進行高效的狀態更新。
  • getters：state 對象讀取方法。圖中沒有單獨列出該模塊，應該被包含在了 render 中，Vue Components 經過該方法讀取全局 state 對象。

3. Vuex 與 localStorage

vuex 是 vue 的狀態管理器，存儲的數據是響應式的。可是並不會保存起來，刷新以後就回到了初始狀態，具體作法應該在 vuex 裏數據改變的時候把數據拷貝一份保存到 localStorage 裏面，刷新以後，若是 localStorage 裏有保存的數據，取出來再替換 store 裏的 state。

let defaultCity = "上海"
try {   // 用戶關閉了本地存儲功能，此時在外層加個try...catch
  if (!defaultCity){
    defaultCity = JSON.parse(window.localStorage.getItem('defaultCity'))
  }
}catch(e){}
export default new Vuex.Store({
  state: {
    city: defaultCity
  },
  mutations: {
    changeCity(state, city) {
      state.city = city
      try {
      window.localStorage.setItem('defaultCity', JSON.stringify(state.city));
      // 數據改變的時候把數據拷貝一份保存到localStorage裏面
      } catch (e) {}
    }
  }
})

這裏須要注意的是：因爲 vuex 裏，咱們保存的狀態，都是數組，而 localStorage 只支持字符串，因此須要用 JSON 轉換：

JSON.stringify(state.subscribeList);   // array -> string
JSON.parse(window.localStorage.getItem("subscribeList"));    // string -> array

方法4、$attrs/$listeners

1. 簡介

多級組件嵌套須要傳遞數據時，一般使用的方法是經過 vuex。但若是僅僅是傳遞數據，而不作中間處理，使用 vuex 處理，未免有點大材小用。爲此 Vue2.4 版本提供了另外一種方法----$attrs/$listeners

  • $attrs：包含了父做用域中不被 prop 所識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這裏會包含全部父做用域的綁定 (class 和 style 除外)，而且能夠經過 v-bind="$attrs" 傳入內部組件。一般配合 interitAttrs 選項一塊兒使用。
  • $listeners：包含了父做用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它能夠經過 v-on="$listeners" 傳入內部組件

接下來咱們看個跨級通訊的例子：

// index.vue
<template>
  <div>
    <h2>浪裏行舟</h2>
    <child-com1
      :foo="foo"
      :boo="boo"
      :coo="coo"
      :doo="doo"
      title="前端工匠"
    ></child-com1>
  </div>
</template>
<script>
const childCom1 = () => import("./childCom1.vue");
export default {
  components: { childCom1 },
  data() {
    return {
      foo: "Javascript",
      boo: "Html",
      coo: "CSS",
      doo: "Vue"
    };
  }
};
</script>
// childCom1.vue
<template class="border">
  <div>
    <p>foo: {{ foo }}</p>
    <p>childCom1的$attrs: {{ $attrs }}</p>
    <child-com2 v-bind="$attrs"></child-com2>
  </div>
</template>
<script>
const childCom2 = () => import("./childCom2.vue");
export default {
  components: {
    childCom2
  },
  inheritAttrs: false, // 能夠關閉自動掛載到組件根元素上的沒有在props聲明的屬性
  props: {
    foo: String // foo做爲props屬性綁定
  },
  created() {
    console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
  }
};
</script>
// childCom2.vue
<template>
  <div class="border">
    <p>boo: {{ boo }}</p>
    <p>childCom2: {{ $attrs }}</p>
    <child-com3 v-bind="$attrs"></child-com3>
  </div>
</template>
<script>
const childCom3 = () => import("./childCom3.vue");
export default {
  components: {
    childCom3
  },
  inheritAttrs: false,
  props: {
    boo: String
  },
  created() {
    console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
  }
};
</script>
// childCom3.vue
<template>
  <div class="border">
    <p>childCom3: {{ $attrs }}</p>
  </div>
</template>
<script>
export default {
  props: {
    coo: String,
    title: String
  }
};
</script>

如上圖所示$attrs表示沒有繼承數據的對象，格式爲{屬性名：屬性值}。Vue2.4 提供了$attrs , $listeners 來傳遞數據與事件，跨級組件之間的通信變得更簡單。

簡單來講：$attrs與$listeners 是兩個對象，$attrs 裏存放的是父組件中綁定的非 Props 屬性，$listeners裏存放的是父組件中綁定的非原生事件。

方法5、provide/inject

1. 簡介

Vue2.2.0 新增 API,這對選項須要一塊兒使用，以容許一個祖先組件向其全部子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。一言而蔽之：祖先組件中經過 provider 來提供變量，而後在子孫組件中經過 inject 來注入變量。 provide / inject API 主要解決了跨級組件間的通訊問題，不過它的使用場景，主要是子組件獲取上級組件的狀態，跨級組件間創建了一種主動提供與依賴注入的關係。

2. 舉個例子

假設有兩個組件： A.vue 和 B.vue，B 是 A 的子組件

// A.vue
export default {
  provide: {
    name: '浪裏行舟'
  }
}
// B.vue
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // 浪裏行舟
  }
}

能夠看到，在 A.vue 裏，咱們設置了一個 provide: name，值爲 浪裏行舟，它的做用就是將 name 這個變量提供給它的全部子組件。而在 B.vue 中，經過 inject 注入了從 A 組件中提供的 name 變量，那麼在組件 B 中，就能夠直接經過 this.name 訪問這個變量了，它的值也是 浪裏行舟。這就是 provide / inject API 最核心的用法。

須要注意的是：provide 和 inject 綁定並非可響應的。這是刻意爲之的。然而，若是你傳入了一個可監聽的對象，那麼其對象的屬性仍是可響應的----vue 官方文檔 因此，上面 A.vue 的 name 若是改變了，B.vue 的 this.name 是不會改變的，仍然是 浪裏行舟。

3. provide 與 inject 怎麼實現數據響應式

通常來講，有兩種辦法：

  • provide 祖先組件的實例，而後在子孫組件中注入依賴，這樣就能夠在子孫組件中直接修改祖先組件的實例的屬性，不過這種方法有個缺點就是這個實例上掛載不少沒有必要的東西好比 props，methods
  • 使用 2.6 最新 API Vue.observable 優化響應式 provide(推薦)

咱們來看個例子：孫組件 D、E 和 F 獲取 A 組件傳遞過來的 color 值，並能實現數據響應式變化，即 A 組件的 color 變化後，組件 D、E、F 不會跟着變（核心代碼以下：）

// A 組件
<div>
      <h1>A 組件</h1>
      <button @click="() => changeColor()">改變color</button>
      <ChildrenB />
      <ChildrenC />
</div>
......
  data() {
    return {
      color: "blue"
    };
  },
  // provide() {
  //   return {
  //     theme: {
  //       color: this.color //這種方式綁定的數據並非可響應的
  //     } // 即A組件的color變化後，組件D、E、F不會跟着變
  //   };
  // },
  provide() {
    return {
      theme: this//方法一：提供祖先組件的實例
    };
  },
  methods: {
    changeColor(color) {
      if (color) {
        this.color = color;
      } else {
        this.color = this.color === "blue" ? "red" : "blue";
      }
    }
  }
  // 方法二:使用2.6最新API Vue.observable 優化響應式 provide
  // provide() {
  //   this.theme = Vue.observable({
  //     color: "blue"
  //   });
  //   return {
  //     theme: this.theme
  //   };
  // },
  // methods: {
  //   changeColor(color) {
  //     if (color) {
  //       this.theme.color = color;
  //     } else {
  //       this.theme.color = this.theme.color === "blue" ? "red" : "blue";
  //     }
  //   }
  // }
// F 組件
<template functional>
  <div class="border2">
    <h3 :style="{ color: injections.theme.color }">F 組件</h3>
  </div>
</template>
<script>
export default {
  inject: {
    theme: {
      //函數式組件取值不同
      default: () => ({})
    }
  }
};
</script>

雖然說 provide 和 inject 主要爲高階插件/組件庫提供用例，但若是你能在業務中熟練運用，能夠達到事半功倍的效果！

方法6、$parent / $children與 ref

  • ref：若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例
  • $parent / $children：訪問父 / 子實例

須要注意的是：這兩種都是直接獲得組件實例，使用後能夠直接調用組件的方法或訪問數據。咱們先來看個用 ref來訪問組件的例子：

// component-a 子組件
export default {
  data () {
    return {
      title: 'Vue.js'
    }
  },
  methods: {
    sayHello () {
      window.alert('Hello');
    }
  }
}
// 父組件
<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.title);  // Vue.js
      comA.sayHello();  // 彈窗
    }
  }
</script>

不過，這兩種方法的弊端是，沒法在跨級或兄弟間通訊。

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

咱們想在 component-a 中，訪問到引用它的頁面中（這裏就是 parent.vue）的兩個 component-b 組件，那這種狀況下，就得配置額外的插件或工具了，好比 Vuex 和 Bus 的解決方案。

總結

常見使用場景能夠分爲三類：

  • 父子通訊： 父向子傳遞數據是經過 props，子向父是經過 events（$emit）；經過父鏈 / 子鏈也能夠通訊（$parent / $children）；ref 也能夠訪問組件實例；provide / inject API；$attrs/$listeners
  • 兄弟通訊： Bus；Vuex
  • 跨級通訊： Bus；Vuex；provide / inject API、$attrs/$listeners

給你們推薦一個好用的 BUG 監控工具Fundebug，歡迎免費試用！

參考文章

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟件、百姓網等衆多品牌企業。歡迎你們免費試用！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程