脚本宝典收集整理的这篇文章主要介绍了3.Vue非父子组件之间的通信,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
如果不是父子组件需要通信,那将怎样实现呢?
首先我们需要创建一个事件中心,通过事件中心来接收或者传递事件,作为一个中转站
let eventControl = new Vue();
<template>
<div @pubEvent="changeData"></div> //监听组件触发的事件,然后调用changeData方法
</template>
<script type="text/javascript">
export default {
data () {
return {
}
}
methods: {
changData () {
eventControl.$emit('changTo', 'msg') //触发事件中心,以及需要传递的事件
}
}
}
</script>
<style type="text/css">
</style>
此时此刻已完成需要的事件的添加到了中转站,触发事件已经完成
<template>
<div></div>
</template>
<script type="text/javascript">
export default {
data () {
return {
msg: ''
}
}
create () {
eventControl.$on('changTo', () => {
this.msg = msg //接收触发事件中心
})
}
}
</script>
<style type="text/css">
</style>
此时此刻已完成接收事件的监听在中转站,接收事件已经完成,当触发事件被点击的,则中转站中的接收事件
会监听到,从而完成费父子组件间的通信,进行传递msg信息
4.自定义事件传递信息这里不做阐述,方法会较为复杂,需要了解的可以观看官方Api,谢谢
以上是脚本宝典为你收集整理的3.Vue非父子组件之间的通信全部内容,希望文章能够帮你解决3.Vue非父子组件之间的通信所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。