VUE組件間的數據傳遞

衆所周知，Vue 是基於組件來構建 web 應用的。組件將模塊和組合發揮到了極致。Vue 是雖然說吸收了 AngularJs 的 MVVM的思想，可是它是單向數據流的，也就是說子組件沒法直接改變父組件狀態。下面總結出經常使用的組件消息傳遞的方式。

父組件向子組件傳遞數據

該方式的數據傳遞是遵循 Vue 單向數據流的規則的，所以使用起來十分的天然。若父組件的數據改變子組件的 UI 展示也隨之變化。
Parent.vue

<template>
  <div>
    <h1>Parent</h1>
    <child :name="childName" />
    <button @click="changeChildName">change the child name</button>
  </div>
</template>
<script>
import Child from './Child';

export default {
  components: {
    Child,
  },
  data() {
    return {
      childName: 'child name is what?',
    };
  },
  methods: {
    changeChildName() {
      this.childName = 'no name';
    },
  },
};
</script>

Child.vue

<template>
  <div>{{name}}</div>
</template>
<script>
export default {
  props: ['name'],
};
</script>

效果以下：

子組件修改父組件的數據

這裏介紹兩種方式：
一、子組件觸發事件，父組件監聽事件作出數據改變
二、父組件將數據變動方法以 props 的形式傳給子組件（借鑑 react 的父子通訊方式）

監聽事件

父組件上經過 v-on 監聽子組件所觸發的事件。
EventParent.vue

<template>
  <div>
    <h1>Event Parent</h1>
    <child :name="childName" @changeParent="changeChildName" />
  </div>
</template>
<script>
import Child from './Child';

export default {
  components: {
    Child,
  },
  data() {
    return {
      childName: 'child name is what?',
    };
  },
  methods: {
    changeChildName() {
      this.childName = 'no name';
    },
  },
};
</script>

EventChild.vue

<template>
  <div>
    {{name}}
     <button @click="changeParentData">change the parent name</button>
  </div>
</template>
<script>
export default {
  props: ['name'],
  methods: {
    changeParentData() {
      this.$emit('changeParent');
    },
  },
};
</script>

效果如圖：

傳遞props

由於本身寫 react 較多，因此好奇 Vue 是否支持子組件回調父組件的事件處理函數，試了一下是能夠的。好像 Element UI 使用該方式較多。我的認爲該方法和事件方式一樣靈活。
Parent.vue

<template>
  <div>
    <h1>Props Parent</h1>
    <child :name="childName" :changeName="changeChildName" />
  </div>
</template>
<script>
import Child from './Child';

export default {
  components: {
    Child,
  },
  data() {
    return {
      childName: 'child name is what?',
    };
  },
  methods: {
    changeChildName() {
      this.childName = 'no name';
    },
  },
};
</script>

Child.vue

<template>
  <div>
    <div>{{name}}</div>
    <button @click="changeName">Change Name</button>
  </div>
</template>
<script>
export default {
  props: ['name', 'changeName'],
};
</script>

以 props 的這種方式你們能夠嘗試實現一下是一種新的思路。

非父子組件間的通訊

上述三個實例都在講述父子組件的通訊，那麼不相關的組件該如何通訊呢？能夠建立一個 Vue 的實例做爲橋來中轉事件。
eventHub.js

import Vue from 'vue';

export default new Vue();

Child01.vue

<template>
  <div>
    <div>我是哥哥，我來觸發事件</div>
    <button @click="clickButton">CLICK</button>
  </div>
</template>
<script>
import EventHub from './eventHub';

export default {
  methods: {
    clickButton() {
      EventHub.$emit('emitevent');
    },
  },
};
</script>

Child02.vue

<template>
  <div>
    <div>我是弟弟，我來監聽哥哥觸發的事件來改變本身的數據</div>
    <span>{{title}}</span>
  </div>
</template>
<script>
import EventHub from './eventHub';

export default {
  created() {
    EventHub.$on('emitevent', () => {
      this.title = 'Hi Brother';
    });
  },
  data() {
    return {
      title: 'Hello EveryOne~',
    };
  },
};
</script>

效果如圖：

總結

父組件改變子組件的數據利用正常單向數據流的特性便可，子組件改變父組件的數據能夠經過事件或者函數 props 兩種方式實現，非父子組件通訊則利用 EventHub 中轉一下。

實例代碼

歡迎你們指正批評、或留言。QQ羣：538631558

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。