利用$emit $on的触发和监听事件实现非父子组件的通信
Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为*处理组件
this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据
this.$bus.$on('自定义事件名'，fn)//监听自定义事件获取数据
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<heads></heads>
<bodys></bodys>
<floor></floor>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//bus总线
Vue.prototype.$bus = new Vue();
var heads = {
template:`
<div>
我是头部: <button @click="clickSay">点击底部显示消息</button>
</div>
`,
methods: {
clickSay(){
// 触发事件
this.$bus.$emit("floorSay","hello Floor!");
}
}
}
var bodys = {
template:`
<div>我是身体</div>
`
}
var floor = {
template:`
<div>
我是底部
<p>{{name}}</p>
</div>
`,
data(){
return {
name:""
}
},
created() {
// 监听触发的事件
this.$bus.$on("floorSay",val=>{
this.name = val;
});
}
}
new Vue({
el:"#app",
components:{
heads,
bodys,
floor
},
data:{
n: 0
},
methods:{
addnum(){
this.n++;
}
}
});
</script>
</html>
总结：非父子组件通信 解决的方案还有vuex、provide/inject是解决同根往下派发、本地存储也可以进行非父子组件之间的通信！