vue中的非父子间的通讯问题简单的实例代码
更新时间：2017年07月19日 11:37:21 作者：有一个王小森
这篇文章主要介绍了vue中的非父子间的通讯问题简单的实例代码,需要的朋友可以参考下
官网上的例子好晦涩，看了一个头两个大，关于非父子间的通讯问题，经过查阅得到了下面的例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟之间的通讯问题</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<one></one>
<two></two>
</div>
<script>
//创建中央事件总线。
var bus =new Vue();
// 组件one
Vue.component('one',{
template:'<button v-on:click="oneFn">点击+</button>',
data:function () {
return{
oneNum:0
}
},
// 为组件one创建方法，用来触发事件common（common是中央事件总线bus的自定义事件名称，只需要与two中的监听事件名称一致即可。
methods:{
oneFn:function () {
bus.$emit("common", this.oneNum+=1)//此处的参数即为two中监听事件中传入的参数（n），此处（触发）的this指的是组件one，而在（监听）的this指的是bus。
}
}
});
// 组件 two
Vue.component('two',{
template:'<p>{{twoNum}}</p>',
data:function () {
return {
twoNum:0
}
},
// 为组件two创建钩子，挂载$on监听事件，
created:function () {
var self = this;//将this赋值给self。
bus.$on('common',function (n) {
self.twoNum = n;//此处为self，表示是组件two的变量，若为this，则表示是bus的变量。
})
}
});
new Vue({
el:'#app'
})
</script>
</body>
</html>
我也是新手，刚开始自学Vue，上面有不懂的童鞋请留言，一起进步！
以上所述是小编给大家介绍的vue中的非父子间的通讯问题简单的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
前端vue面试总问watch和computed区别及建议总结
在现代前端的面试中,vue和react是面试过程中基本必问的技术栈,其中Vue响应式话题,watch和computed是面试官非常喜欢聊的主题,虽然watch和computed它们都用于监听数据的变化,但它们在实现原理、使用场景和行为上有着显著的区别,本文将深入探讨,并提供一些面试过程中的建议2023-10-10
最近接触了vue.js,一度非常好奇vue.js是如何监测数据更新并且重新渲染页面,这篇文章主要给大家介绍了关于Vue源码学习之响应式是如何实现的相关资料,需要的朋友可以参考下2021-10-10
路由传参主要有两种方式一种是路径传参一种是参数传递,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
这篇文章主要介绍了Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法，非常具有实用价值，需要的朋友可以参考下2017-10-10
本篇文章主要介绍了Vue 兄弟组件通信的方法（不使用Vuex），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了Vue中使用js-cookie详情，文章围绕js-cookie的相关资料展开详细内容具有一定的的参考价值，需要的小伙伴可以参考一下2022-03-03
这篇文章主要介绍了在Vue项目中引入腾讯验证码服务的教程,需要的朋友可以参考下2018-04-04
本篇文章主要介绍了详解使用vuex进行菜单管理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家介绍了Vue3 通过作用域插槽实现树形菜单嵌套组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了vite+vue3项目中使用SVG方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论