Vue非父子组件传值。

非父子组件传值

直接上代码！

public.js

improt Vue from 'vue';
export default new Vue({}) ;  // 首先新建一个公用方法 并且往外输出

a.vue

<template>
<div>
<button @handleEmit>点击传值</button>
</div>
</template>
<script>
 import public from '引入公用方法';
 export default {
  data(){
  return {
   msg:"我是传值一方"
}
},
methods:{
  handleEmit(){
  public.$meit("receive",this.msg);   // 触发事件传值    公用方法.$meid发送
}
}
}
</script>

b.vue

<template>
<div>
</div>
</template>
<script>
improt public from '这里也引用公共方法';
export default {
  mounted(){   // 页面渲染完毕
   public.$on('receive',function(data){   //data==>传过来的值  公用方法.$on接收 
      console.log(data);
})
}
}
</script>