Vue非父子组件通信详解
程序员文章站
2022-03-07 14:57:24
组件是vue核心的一块内容，组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据，子组件向父组件传数据，非父子组件间的通信。前两种通信vue的文档都说的很...
组件是vue核心的一块内容，组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据，子组件向父组件传数据，非父子组件间的通信。前两种通信vue的文档都说的很清楚，但是第三种文档上确只有下面的几句
具体如何去实现却没有很详细的说明，于是自己试着进行了实现。先看下简单的通信效果：
就是点击了一个组件，另一个组件的数字递加。
html如下：
<div id="app"> <component-a></component-a> <component-b></component-b> </div>
再来看一下如何实现每一个组件：
var bus = new vue() //首先建立一个空的vue实例作为事件的中转
vue.component('component-a',{
template: `<div><button @click="incrementb">{{masga}}</button></div>`, //添加点击事件incrementb ,因为点击a需要增加b
data () {
return {
masga : 0
}
},
methods: {
incrementb: function () { //增加b的事件
bus.$emit('incrementb') //中转站bus 触发incrementb事件
}
},
mounted: function () {
var _this = this
bus.$on('incrementa',function(){ //中转站bus自定义increamenta事件用来增加msga，这个事件最终由组件b进行触发
_this.masga ++
})
//bus.$on('incrementa',()=>{ //这里也可以用箭头函数，就不会有_this这个变量了，因为箭头函数不会改变this指向
// this.masga ++
//})
}
})
从上面的代码可以看出真正的改变方法是通过bus里注册监听事件来实现的，同理代component-b也是一样
vue.component('component-b',{
template: `<div><button @click="incrementa">{{masgb}}</button></div>`,
data () {
return {
masgb : 0
}
},
methods: {
incrementa: function () {
bus.$emit('incrementa')
}
},
mounted: function(){
bus.$on('incrementb',() => {
this.masgb ++
})
}
})
完整代码如下，可直接复制运行
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>非父子组件通信</title>
</head>
<body>
<div id="app">
<component-a></component-a>
<component-b></component-b>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
<script>
var bus = new vue() //首先建立一个空的vue实例作为事件的中转
vue.component('component-a',{
template: `<div><button @click="incrementb">{{masga}}</button></div>`, //添加点击事件
data () {
return {
masga : 0
}
},
methods: {
incrementb: function () {
bus.$emit('incrementb')
}
},
mounted: function () {
var _this = this
bus.$on('incrementa',function(){
_this.masga ++
})
bus.$on('incrementa',()=>{
this.masga ++
})
}
})
vue.component('component-b',{
template: `<div><button @click="incrementa">{{masgb}}</button></div>`,
data () {
return {
masgb : 0
}
},
methods: {
incrementa: function () {
bus.$emit('incrementa')
}
},
mounted: function(){
bus.$on('incrementb',() => {
this.masgb ++
})
}
})
var vm = new vue({
el: "#app"
})
</script>
同时也可以看出这么做仅有两个组件就有些麻烦，事件的流向不是很清晰，所以在出现复杂的场景时需要使用vuex进行管理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。