Vue組件間通信方式

一.Props傳遞數據

　　當前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。在父組件中使用子組件，本質通過v-bind綁定屬性傳入子組件，子組件通過props接收父組件傳入的屬性。

<template>
 <div>
  父組件:{{mny}}
  <Son1 :mny="mny"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

二.$emit使用

　　觸發當前實例上的事件。附加參數都會傳給監聽器回調。子組件觸發父組件方法,通過回調的方式將修改的內容傳遞給父組件，父組件通過v-on接收子組件傳入的方法，並接收子組件傳入的參數。

<template>
 <div>
  父組件:{{mny}}
  <Son1 :mny="mny" @input="change"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 methods: {
  change(mny) {
   this.mny = mny;
  }
 },
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

子組件觸發綁定自己身上的方法

<template>
 <div>
  子組件1: {{mny}}
  <button @click="$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  mny: {
   type: Number
  }
 }
};
</script>

同步父子組件的數據,->子組件上使用的語法糖的寫法 （.sync和v-model寫法），v-model和.sync的區別在於v-model觸發的事件只能是input，而.sync可以自定義事件名

.sync

　　對一個 prop 進行“雙向綁定”, 推薦以 update:myPropName 的模式觸發事件取而代之,然後父組件可以監聽那個事件並根據需要更新一個本地的數據屬性。

<Son1 :mny.sync="mny"></Son1>
<!-- 觸發的事件名 update:(綁定.sync屬性的名字) -->
<button @click="$emit('update:mny',200)">更改</button>

v-model

一個組件上的 v-model 預設會利用名為 value 的 prop 和名為 input 的事件.

<Son1 v-model="mny"></Son1>
<template>
 <div>
  子組件1: {{value}} // 觸發的事件只能是input
  <button @click="$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  value: { // 接收到的屬性名只能叫value
   type: Number
  }
 }
};
</script>

三.$parent、$children

　　$parent:  指定已創建的實例之父實例，在兩者之間建立父子關係。子實例可以用 this.$parent 訪問父實例，子實例被推入父實例的 $children 數組中。

　　$children:  當前實例的直接子組件。需要註意 $children 並不保證順序，也不是響應式的。如果你發現自己正在嘗試使用 $children 來進行數據綁定，考慮使用一個數組配合 v-for 來生成子組件，並且使用 Array 作為真正的來源。

<Grandson1 :value="value"></Grandson1>
<template>
 <div>
  孫子:{{value}}
  <!-- 調用父組件的input事件 -->
  <button @click="$parent.$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  value: {
   type: Number
  }
 }
};
</script>

四.$attrs、$listeners

$attrs：批量向下傳入屬性

　　包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。

<Son2 name="小明" age="10"></Son2>

<!-- 可以在son2組件中使用$attrs屬性,可以將屬性繼續向下傳遞 -->
<div>
  兒子2: {{$attrs.name}}
  <Grandson2 v-bind="$attrs"></Grandson2>
</div>


<template>
 <div>孫子:{{$attrs}}</div>
</template>

$listeners：批量向下傳入方法

　　包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。

<Son2 name="小珠峰" age="10" @click="()=>{this.mny = 500}"></Son2>
<!-- 可以在son2組件中使用listeners屬性,可以將方法繼續向下傳遞 -->
<Grandson2 v-bind="$attrs" v-on="$listeners"></Grandson2>

<button @click="$listeners.click()">更改</button>

五.Provide & Inject

依賴註入原理，provide 和 inject 主要為高階插件/組件庫提供用例。並不推薦直接用於應用程式代碼中。

Provide：在父級中註入依賴數據

　　provide 選項應該是一個對象或返回一個對象的函數。該對象包含可註入其子孫的屬性。

provide() {
  return { parentMsg: "父親" };
},

Inject：在任意子組件中可以註入父級數據

inject: ["parentMsg"] // 會將數據掛載在當前實例上

六.Ref使用

　　一個對象，持有註冊過 ref 特性的所有 DOM 元素和組件實例。可以在父組件中獲取子組件的屬性和方法。

<Grandson2 v-bind="$attrs" v-on="$listeners" ref="grand2"></Grandson2>
mounted() { // 獲取組件定義的屬性
  console.log(this.$refs.grand2.name);
}

七.EventBus

用於跨組件通知(不複雜的項目可以使用這種方式)

Vue.prototype.$bus = new Vue();

在vue原型對象上添加一個公共發放，暴露vue示例，供組件接收方法

mounted() {
   this.$bus.$emit("my", "我是Grandson1");
 },

兄弟間組件接收方法

mounted() {
  this.$bus.$on("my", data => {
   console.log(data);
  });
 },

八.Vuex通信

全局統一狀態管理，用於大型項目組件間通信，管理數據狀態。

vue所有通信方式總結，嗯，就醬啦~