Vue2.0 实战项目 组件间通信的方法

Posted 2020-09-29 寒枫归尘

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>