關於Vue中組件之間傳值

組件之間的通信的問題，組件之間的通信可以分爲以下幾種：

1. 父子組件傳遞，父向子傳遞採用 props，子向父採用事件 emit。
2. 非父子組件的傳遞，全局 event bus, 創建一個新的 vue 的實例，採用事件的方式通信，再者採用 vuex 全局狀態管理。

父子組件相互通信方法詳情

1. 子組件通過 $emit 調用父組件的 method

// 父組件中定義 @updateInfo 調用的方法
<template>
  <user-popup @updateInfo="updateInfo"></user-popup>
</template>

methods: {
  updateInfo() {
    xxxxxx
  },
},

// 子組件在某個方法中進行調用，例如
saveInfomation() {
  this.$emit('updateInfo');
},

1. 父組件通過 prop 向子組件進行傳值

// 父組件內定義傳遞給子組件的值 userInformation
<template>
  <child :userInformation="userInfo"></child>
</template>

data() {
  return {
    userInfo: {
      type: Object,
      required: true,
    },
  };
},

// 子組件內通過 prop 獲取父組件傳遞的值 userInformation
<template>
  <label>姓名：</label><span>{{userInformation.username}}</span>
</template>

props: {
  userInformation: {
    type: Object,
    required: true,
  }
}

1. 父組件通過 $refs 調用子組件的 method

<template>
  <child ref="son"></child>
</template>

method: {
  parentMethod() {
    this.$refs.son.childMethod();
  },
},

1. 直接用 this.$parent.xxx 調用父組件的方法

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

注意：this.$parent和this.$children 是訪問組件的應急方法，更推薦使用 prop和event實現父子組件通信。

非父子組件相互通信方法詳情

1. event bus

情景描述：brother.vue 和 sister.vue 兩姊妹要通信，sister 要知道 brother 被點擊了多少次，由於它們師兄和師妹的關係（平級），所以需要一個新的中間件 globalBus 來進行消息的傳遞。

globalBus.js

import Vue from 'vue';
export const globalBus = new Vue();

這裏 import 了一個 vue 類，然後實例化並且將它 export, 實際上是創建了一個與 DOM 和程序的其他部分完全解耦的組件，它僅僅是一個組件所以非常的輕量。

brother.vue

<template>
  <button @click="clickCount"></button>
</template>

import { globalBus } from './globalBus';

export default {
  data() {
    return {
      counts: 0,
    };
  },
  method: {
    clickCount() {
      this.counts++;
      globalBus.$emit('countNumber', this.counts);
    },
  },
}

觸發了 globalBus 的 countNumber 事件，返回參數 this.counts。

sister.vue

import { globalBus } from './globalBus';

export default {
  created() {
    this.total();
  },
  method: {
    total() {
      globalBus.$on('countNumber', (number) => {
        console.log(`brother 被點擊了 ${number} 次。`);
      });
    },
  },
}

監聽 globalBus 的 countNumber 方法