非父子组件之间的通信
-
创建一个空实例(bus中央事件总线也可以叫中间组件)
-
利用$emit $on的触发和监听事件实现非父子组件的通信
Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件 this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据 this.$bus.$on('自定义事件名',fn)//监听自定义事件获取数据
解决的方案还有vuex、provide/inject是解决同根往下派发、本地存储也可以进行非父子组件之间的通信
例示代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非父子组件之间的通讯</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
//声明一个空的组件
Vue.prototype.$bus=new Vue()
//声明兄弟组件
var MyHeader={
template:`
<div>我是头部{{headermsg}}</div>
`,
data(){
return{
headermsg:'我是头部的信息'
}
},
created(){
//如果没有下面这一行,则this指向的是myheader
var self=this
this.$bus.$on('sending',function(val){
this.headermsg=val
})
}
}
var MyBody={
template:`
<div>我是身体</div>
`
}
var MyFooter={
template:`
<div>我是尾部<button @click='sendhead'>我要跟头部通信</button></div>
`,
methods:{
sendhead(){
this.$bus.$emit('sending','我是底部的数据')
}
}
}
new Vue({
el:'#app',
components:{
MyHeader,
MyBody,
MyFooter
},
template:`
<div>
<my-header></my-header><hr>
<my-body></my-body><hr>
<my-footer></my-footer>
</div>
`,
data(){
return{}
},
})
</script>
</body>
</html>