首先在main.js创建一个中转站,并且暴露出来。
//非父子组件通信中心
const vueEvent=new Vue();
export default vueEvent;
然后在自己的页面Page.vue中引入进来(路径自行更改)
import vueEvent from '../../../main'
当前页面的组件,点击的时候发送数据为a标签的内容,在mounted方法里面 span里面接收并重新渲染内容!
<a @click='send'>{{ name }}</a>
<span>{{ defaultMsg }}</span>
data() {
return {
name:'小灰灰呀',
defaultMsg:'全部'
}
},
methods:{
send:function(e){
vueEvent.$emit("outmes", e.srcElement.innerHTML);
}
}
mounted: function() {
vueEvent.$on("outmes", function(mes) {
that.defaultMsg = mes;
});
效果每点击一个内容都会发送里面的内容到上面