Vue非父子组件通信详解
更新时间：2021年10月09日 16:56:14 作者：断劫断念
这篇文章主要为大家详细介绍了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进行管理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了父子组件生命周期及子组件获取数据问题剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
这篇文章主要介绍了vue基础之模板和过滤器用法,结合实例形式分析了vue模板与过滤器的功能、使用方法及相关操作注意事项,需要的朋友可以参考下2019-03-03
这篇文章主要为大家详细介绍了vue子路由跳转实现tab选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
完美解决vue 项目开发越久 node_modules包越大的问题
这篇文章主要介绍了vue 项目开发越久 node_modules包越大的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue-router+nginx 非根路径配置方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
最近在用vue做移动端项目，网上找了一些移动端适配的方案，个人觉得手淘团队flexible.js还是比较容易上手，在这里做下总结。对vue.js移动端配置flexible.js 相关知识感兴趣的朋友跟随小编一起看看吧2019-04-04
最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得，本文给大家分享vue router自动判断左右翻页转场动画效果，感兴趣的朋友一起看看吧2017-10-10
Vue Router之router.push和router.resolve页面跳转方式
这篇文章主要介绍了Vue Router之router.push和router.resolve页面跳转方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了Vue3实现全局loading指令,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
今天小编就为大家分享一篇解决vue v-for 遍历循环时key值报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论