vue组件间通信的一些实用方法（VUE2.x）

vue组件间通信的一些实用方法（VUE2.x）

一、父子组件间通信

1. 常用的父子组件通信方法，一般涉及props和$emit之间的交互，也就是我们在vue常说的属性传递和事件映射，实例如下：

<template>
    <div class="parent">
        <child :message="message" @getReply="getReply"></child>
    </div>
</template>

<script>
    import child from './child'

    export default {
        name: 'parent',
        components:{
            child
        },
        data() {
            return {
                message: '你好'
            }
        },
        methods:{
            getReply(message){
                console.log('子组件回复消息',message);
            }
        }
    }
</script>

<template>
    <div class="child">

    </div>
</template>

<script>
    export default {
        name: 'child',
        props:['message'],
        mounted(){
            //如果接收到父组件传递的消息，进行消息回复
            if(this.props.message){
                this.$emit('getReply','已收到消息');
            }
        }
    }
</script>

说明：上诉代码中，父组件和子组件在同一文件夹之下，父组件引用并使用了child子组件，并利用message传递给子组件一句“你好”。子组件在mounted生命周期获取属性message，如果获取到消息，利用"getReply"事件映射，告诉父组件已收到消息，父组件通过绑定事件的getReply方法进行接收。这就是一个常用的vue父子间通过属性和事件进行通信的过程。

2. 子组件调用父组件的方法，父组件调用子组件的方法

   • 子组件调用父组件方法，常用的应用场景例如，父组件为一个表格组件，子组件是表单修改或保存的模态框组件，子组件填写表单完成后点击保存，请求成功后需要刷新表格组件。代码示例如下：

     <!--父组件(表格组件)-->
     <template>
         <div class="table">
             <dialog></dialog>
         </div>
     </template>
     
     <script>
         import dialog from './dialog'
     
         export default {
             name: 'table',
             components:{
                 dialog
             },
              provide() {
                return {
                    refreshTableData: this.getData,
                }
            },
             methods:{
                 getData(){
                     //表格获取请求数据的方法，由于只是简单的示例，所以就不写实际业务代码了
                 }
             }
         }
     </script>
     
     <!--子组件(表单模态框)-->
     <template>
         <div class="dialog">
             <!--子组件-->
             <button @click="save">保存</button>
         </div>
     </template>
     
     <script>
         export default {
             name: 'dialog',
             inject: ['refreshTableData'],
             methods:{
                 save(){
                     /*当针对表格进行新增或修改操作后，打开模态框针对表单填写完毕后进行保存
                    * 这时候通过异步请求数据保存成功后，需要父组件的表格数据刷新
                    * 就可通过父组件提供的refreshTableData方法进行操作
                    * */
                     this.refreshTableData();
                 }     
             }
         }
     </script>
     

     说明：通过provider和inject提供了子组件调用父组件的函数方法，不仅限于函数方法，也可通过此方法调用父组件的变量。

• 父组件调用子组件的方法和变量的方法相对简单，可通过ref获取子组件的实例进行调用，不过一般不建议这样使用，相对不太规范，但是也是一个可行性方案。代码如下：

  <template>
      <div class="parent">
          <child ref="child"></child>
      </div>
  </template>
  
  <script>
      import child from './child'
  
      export default {
          name: 'parent',
          components:{
              child
          },
          methods:{
              useChildMethod(){
                  this.$refs.child.init();
              }
          }
      }
  </script>
  

  说明：假设子组件内部有一个init的初始化方法，可在父组件通过ref获取组件实例进行调用。

二、全局组件间的通信

1. 利于vuex建立全局的数据共享

   全局通信一般的业务场景可能是功能菜单、面包屑、页面之间的联动操作，或者购物APP的购物车效果。我们简单举例购物车效果的实际应用。代码如下：

   // shoppingBag.js文件
   const shoppingBag = {
     state: {
       goods:[]
     },
   
     mutations: {
       // 设置一级菜单
       SET_GOODS: (state, goods) => {
         state.goods = goods
       },
     },
   
     actions: {
       setGoods({commit}, goods) {
         commit('SET_GOODS',goods)
       },
     }
   };
   
   export default shoppingBag
   

   上面简单的作为一个购物车的store模块，里面定义了goods变量存放商品，提供了一个setGoods方法用于保存商品数据。由于只是举例演示，并没有书写真实的业务复杂代码。真实场景可能是设计商品名称、id、数量等信息，涉及购物车入库时的相关商品数据处理，这边不做赘述。

   为了在组件文件中使用goods变量，需要定义getters：

   //新建一个getters.js文件，声明getters
   const getters = {
     goods: state => state.shoppingBag.goods,
   };
   export default getters
   

   定义store的使用：

   // store.js文件
   import Vue from 'vue'
   import Vuex from 'vuex'
   
   import shoppingBag from './shoppingBag'
   import getters from './getters'
   
   Vue.use(Vuex);
   
   const store = new Vuex.Store({
     modules: {
       shoppingBag,
     },
     getters
   });
   
   export default store
   

   然后在vue项目的入口文件中需要在vue实例中使用我们声明的store，示例如下：

   import Vue from 'vue'
   import router from './router'
   import store from './store'
   
   new Vue({
     el: '#app',
     router,
     store,
     template: '<App/>',
   })
   

   然后我们就可以在全局任何一个组件中用mapGetters在计算属性中去获取goods变量并使用，通过store的dispatch方法去触发购物车的setGoods方法，更新购物车数据：

   import {mapGetters} from 'vuex';
   
   export default {
       name:'test-component',
       computed: {
         ...mapGetters([
           'goods'
         ]),
       },
           methods:{
               //更新购物车数据
               updateGoods(){
                   let data = [];//新的购物车数据
                   this.$store.dispatch('setGoods',data);
               }
           }
   }
   
   

   以上就是通过vuex实现全局组件间数据通信的一个简单流程介绍。

2. 通过vue实例的事件映射和事件监听达到全局通信的效果：

   大家都知道父子组件通信时我们可以通过绑定事件监听，和子组件通过$emit事件映射，可以达到子组件到父组件的一个通信过程，利用这个方法，我们可以实现全局的一个事件的通信。示例如下：

   // 在main.js入口文件中声明一个broadcast广播示例，绑定在vue的原型上方便我们全局使用
   Vue.prototype.$broadcast = new Vue();
   
   //在项目中示例一个发送广播的组件
   export default {
       name:'send-message',
       mounted(){
           //在mounted生命周期发送一条广播
           this.$broadcast.$emit('contact','你好');
   
       }
   }
   
   //在项目中示例一个发送广播的组件
   export default {
       name:'get-message',
       destroyed() {
         this.$bus.$off('contact', this.getMessage);
       },
       mounted(){
           //在mounted生命周期进行监听
           this.$broadcast.$on('contact',this.getMessage);
       },
       methods:{
           getMessage(message){
               //收到消息做相关的业务处理
           }
       }
   }
   
   

   说明：通过$emit发送广播事件时，进行相应监听的组件都会收到消息并触发绑定的函数方法。在这边，我在组件的destoryed生命周期对绑定函数进行了解绑，如果不解绑的话，由于事件队列相同事件名称的绑定函数是一个数组，就算组件被销毁，但是$broadcast这个实例未销毁，在上面绑定的事件函数就是冗余的，会影响js代码性能，所以在组件被销毁后需及时进行解绑，否则可能会造成一些不可预料的系统bug。（此处“broadcast”只是一个命名，大家可以根据自己需要进行命名，常用的命名方式可能使用“bus”。尽量不要使用broadcast，可能会与vue内置的一些属性方法冲突）