在vue中實現(xiàn)組件間的通信

1、組件通信

概念：組件通信，就是指組件與組件之間的數(shù)據(jù)傳遞。

• 組件的數(shù)據(jù)是獨立的，無法直接訪問其他組件的數(shù)據(jù)
• 想用其他組件的數(shù)據(jù)→組件通信

1.1、不同的組件關(guān)系和組件通信方案分類

組件關(guān)系分類（如圖）：

1. 父子關(guān)系：

   1. 父組件通過props將數(shù)據(jù)傳遞給子組件
   2. 子組件利用$emit通知父組件修改更新

2. 非父子關(guān)系：

   • provide & inject或eventbus

3. 通用方案：vuex

1.2、組件通信的解決方案

父傳子props屬性：

子傳父$emit屬性:

1.3、非父子通信- event bus事件總線

作用：非父子組件之間，進行簡易消息傳遞。(復雜場景→Vuex)

1. 創(chuàng)建一個都能訪問到的事件總線(空Vue 實例)→utils/EventBus.js

2. A組件(接收方)，監(jiān)聽Bus實例的事件

3. B組件(發(fā)送方)，觸發(fā)Bus 實例的事件

2、prop

2.1、prop詳解

• Prop定義：組件上注冊的一些自定義屬性Prop
• 作用：向子組件傳遞數(shù)據(jù)
• 特點:
  • 可以傳遞任意數(shù)量的prop
  • 可以傳遞任意類型的prop

代碼演示：

2.2、prop校驗

作用：為組件的prop指定驗證要求，不符合要求，控制臺就會有錯誤提示–>幫助開發(fā)者，快速發(fā)現(xiàn)錯誤

語法：①類型校驗②非空校驗③默認值④自定義校驗

1. 基礎寫法（類型校驗）

export default {//此種方式就沒對值進行校驗，假如傳入其他非數(shù)字類型也會傳參// props: ["precent"],//將props寫成對象的形式來約束參數(shù)類型(基礎寫法，類型校驗)props: {precent: Number //String Boolean Array Object Function}
};

2. 完整寫法（類型，非空，默認，自定義）

     props: {precent: {type: Number, //類型校驗 Number String Boolean Array Object Functionrequired: true, //是否可以空，true：表示開啟非空驗證default: 0, //默認的參數(shù)，沒有值的時候使用該值validator(value) { //value是傳過來的值// 在此進行自定義的代碼校驗邏輯return true;//返回true：即通過了代碼邏輯，false：沒有通過代碼邏輯}}}

2.3、prop & data、單向數(shù)據(jù)流

prop與data的共同點和區(qū)別：

• 共同點：都可以給組件提供數(shù)據(jù)。
• 區(qū)別：
  • data的數(shù)據(jù)是自己的→隨便改
  • prop的數(shù)據(jù)是外部的→不能直接改，要遵循單向數(shù)據(jù)流

單項數(shù)據(jù)流：父級prop 的數(shù)據(jù)更新，會向下流動，影響子組件。這個數(shù)據(jù)流動是單向的。

所以，當在子組件需要修改來自父組件prop的值時，需要通過$emit來將修改的邏輯傳到父組件，在父組件修改傳到子組件的值，再根據(jù)單項數(shù)據(jù)流的特點，從而改變子組件的值。

3、v-mdoel原理

• 原理：v-model本質(zhì)上是一個語法糖（語法的簡寫）。例如應用在輸入框上，就是value屬性和 input事件的合寫。

• 作用：提供數(shù)據(jù)的雙向綁定

  • 數(shù)據(jù)變，視圖跟著變:value
  • 視圖變，數(shù)據(jù)跟著變@input

• 注意：$event用于在模板中，獲取事件的形參

v-model原理代碼演示：