非父子组件传值
直接上代码!
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>