Vue2.0 實戰項目(五) 組件間通訊的方法

Vue組件之間通訊分爲三種狀況：父組件向子組件通訊、子組件向父組件通訊、兄弟組件間通訊。

一.父組件向子組件通訊

經過props能夠將值傳遞給子組件

<!-- 父組件 -->
<template>
  <div id="app">
    <!-- 父子組件間通訊 -->
    <child :message="toChildMsg"></child>
  </div>
</template>

<script type="text/ecmascript-6">
  import childfrom './components/child/child.vue';

  export default {
    data() {
      return {
        toChildMsg: '將我傳給子組件',
      };
    },
    components: {
      child
    }
  };
</script>

<!-- 子組件 -->
<template>
  <div id="child">
    <h1>子組件</h1>
    <p>{{message}}</p>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: ['message']
  };
</script>

二.子組件向父組件通訊

經過某種事件，自定義$emit通訊給父組件

 1 <!-- 父組件 -->
 2 <template>
 3   <div id="app">
 4     <!-- 父子組件間通訊 -->
 5     <child @listenToChildMsg="takeMsg"></child>
 6   </div>
 7 </template>
 8 
 9 <script type="text/ecmascript-6">
10   import child from './components/child/child.vue';
11 
12   export default {
13     components: {
14       child
15     },
16     methods: {
17       takeMsg: function (data) {
18         this.msgData = data;
19       }
20     }
21   };
22 </script>

<!-- 子組件 -->
<template>
  <div id="child">
    <h1>子組件</h1>
    <div @click="sendMsgToParent">點擊傳值給父組件</div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    methods: {
      sendMsgToParent: function () {
        this.$emit('listenToChildMsg', '將我傳給父組件');
      }
    }
  };
</script>

三.兄弟組件間通訊

兄弟組件間通訊有兩種方式。若是通訊不復雜的話可使用event-bus方法，若是比較複雜可使用vuex。

event-bus方法是新建一個空白組件，經過此組件達到通訊的目的。

<!-- bus組件 -->
<template>

</template>

<script type="text/ecmascript-6">
  import Vue from 'vue';
  export default new Vue();
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

<!-- foo組件 -->
<template>
  <div>
    <h1>the count of foo is {{fooCount}}</h1>
    <button @click="addBar()">點擊</button>
  </div>
</template>

<script type="text/ecmascript-6">
  import eventBus from '../bus/bus.vue';

  export default{
    methods: {
      addBar: function () {
        eventBus.$emit('addBar');
      }
    },
    data() {
      return {
        fooCount: 0
      };
    },
    mounted: function () {
      eventBus.$on('addFoo', function (num) {
        this.fooCount += num;
      }.bind(this));
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

<!-- bar組件 -->
<template>
  <div>
    <h1>the count of bar is {{barCount}}</h1>
    <button @click="addFoo()">點擊</button>
  </div>
</template>

<script type="text/ecmascript-6">
  import eventBus from '../bus/bus.vue';

  export default{
    methods: {
      addFoo: function () {
        eventBus.$emit('addFoo', 2);
      }
    },
    data() {
      return {
        barCount: 0
      };
    },
    mounted: function () {
      eventBus.$on('addBar', function () {
        this.barCount++;
      }.bind(this));
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

<!-- App.vue -->
<template>
  <div id="app">
    <!-- 非父子組件間傳值 -->
    <bar></bar>
    <br />
    <foo></foo>
  </div>
</template>

<script type="text/ecmascript-6">
  import foo from './components/foo/foo.vue';
  import bar from './components/bar/bar.vue';

  export default {
    components: {
      foo,
      bar
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

經過vuex管理各組件間通訊

<template>
 <div id="app">
    <p>{{count}}
        <button @click="inc">+</button>
        <button @click="dec">-</button>
    </p>
 </div>
</template>

<script type="text/ecmascript-6">
const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            inc: state => state.count++,
            dec: state => state.count--
       }
});


 export default {
    el: '#app',
    computed: {
        count() {
            return store.state.count;
        }
    },
    methods: {
        inc() {
            store.commit('inc');
        },
        dec() {
            store.commit('dec');
        }
    }
 }
</script>