Vue 组件通信六种方法

​

前言

今天继续加油学习，今天整理一下VUE中组件通信六种方式，依次介绍一下各个通信方式。嘻嘻嘻，让我们一起学起来好吧~~~come

方法一props/$emit

父传子：props\ 子传父：父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件\ 第一种方法是我们经常用到的方法 我就不写代码来进行展示了，这个比较简单。

方法二：$eimt/ $on

说明：上面两种方式处理的是父子组件之间的数据 传递，如果两种组件不是父子关系呢？这种情况下面可以使用中央事件总线的方法。/ 新建一个Vue事件bus对象，然后通过bus.

$emit触发事件，bus.$

on监听触发的事件这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。\

具体实现方式：

var bus =new Vue();
      Vue.component('brother2',{
        data(){
          return{
            msg:"hello brother1"
          }
        },
        template:`
          <div>
          <p>我是老大 </p>
          <input type='text' v-model:'msg' @input='passData(msg)'/>
        </div>
        `,
        methods:{
          passData(val){
            // 触发全局事件globalEvent
            this.$emit('globalEvent',val)
          }
        }
      });
      Vue.component('brother1',{
        data(){
          return{
            msg:"hello brother1",
            brother2Msg:''
          }
        },
        template:`
          <div>
         <p>我是老二</p>
         <p> 老大传递过来的数据：{{brother2Msg}}</p>
        </div>
        `,
        mounted(){
          //绑定全局事件globalEvent事件
          bus.$on('globalEvent事件',(val)=>{
            this.brother2Msg=val;
            
          })
        }
        
      });

var Event=new Vue();
   Event.$emit(事件名,数据);
   Event.$on(事件名,data => {});
// 假设兄弟组件有三个，分别是A、B、C组件，C组件如何获取A或者B组件的数据
// 组件A、B通过Event.$emit(事件名,数据)将数据传递，组件C通过 Event.$on(事件名,data => {})接受组件A、B传递的数据

方法三：Vuex

vuex 就是一个仓库，仓库里放了很多对象。在state中存放数据源，当组件要更改state中的数据时，必须通过mutation进行，mutation储存的是改变state中数据的操作方法，之后通过actions储存的操作去触发mutation中的方法,由组件中的$store.dispatch(‘action 名称’, data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。

方法四：# Vuex + localstorage

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。\这里需要注意的是：由于vuex里，我们保存的状态，都是数组，而localStorage只支持字符串，所以需要用JSON转换。

方法五：

$attrs和$

listeners

第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有个子组件B，组件B下面有组件C，这时如果组件A想传递数给组件C怎么办呢?

如果采用第一种方法，我们必须让组件A通过prop传递信息给组件B, 组件B在通过prop传递信息给组件C；要是组件A和组件C之间有更多的组件 那采用这种方式就很复杂了。vue2.4开始提供了

$attrs和$

listeners来解决这个问题能够让组件A之间传递信息给组件C

Vue.component('C',{
      data(){
        return{
          
        }
      },
     template:`
         <div>
         <div  @click='cClickHandler'>{{$attrs.messagec}}</div>
       </div>
     `  ,
      methods:{
        cClickHandler(){
          alert(1);
          this.$emit('getCData','我是C的数据')
        }
      }
    });
    
    Vue.component('B',{
      data(){
        return{
          
        }
      },
     template:`
         <div>
         <C v-bind="$attrs" v-on="$listeners"> </C>
       </div>
     `  ,
      methods:{
        
      }
    });
    
    Vue.component('A',{
      data(){
        return{
          
        }
      },
     props:['message'],
     template:`
         <div>
         <B v-bind="$attrs" v-on="$listeners"> </B>
         
       </div>
     `  ,
      methods:{
        
      }
    });
    var App ={
      data(){
        return{
         msg:'我是父组件的内容',
         messagec:'hello c'
        }
      },
      methods:{
        
      },
      template:`<div>
               <p> 这是一个父组件</p>
           <A :messagec='messagec' v-on:getCData='getCData'> </A>
           </div>
      `,
      methods:{
        getCData(val){
          console.log(val);
        }
      }
    }

方法六：provide/inject

父组件中通过provide来提供变量,然后在子组件中通过inject来注入变量。不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前 父组件的prop属性来获取数据,只要在父组件的生命周期内，子组件都可以调用。

Vue.component('Child',{
      data(){
        return{
          msg:''
        }
      },
     template:`
         <div>
         我是孩子{{msg}}
       </div>
     `  , 
         inject:['for'],
     created(){
       this.msg=this.for;
     }
    });
  Vue.component('Parent',{
     template:`
         <div>
        <p> 我是父亲</p>
        </Child>  
       </div>
     `  ,
    });
    Var App ={
            data(){
              return{
                
              }
            },
           provide:{
             for:'他爹'
           }, 
           template:`
             <div> 
              <h2>我是入口组件</h2>
            <Parent/>
             </div>
           ` 
    } ;