在使用VUE的事件总线时,数据已经能够成功传递了,但是无法将其修改到data数据中,传递的数据只能在$on中使用
这是uniapp中使用的代码,这是传值的组件(非父子组件),当点击跳转的时候,通过sendMsg方法传值,值是可以传过去的
<navigator :url="'/pages/test/test'" @click="sendMsg(article.path)">
这是methods中定义的sendMsg方法
sendMsg(path){
this.path = path
this.$bus.$emit('sendMsg',path)
}
接着在需要被传值的组件中的mounted中进行接收
mounted() {
this.$bus.$on('sendMsg',(data)=>{
this.path = data
console.log(data)
})
},
data成功打印
如果想加上对data中数据的修改也是可以的
mounted() {
this.$bus.$on('sendMsg',(data)=>{
this.path = data
console.log(data)
console.log(this.path)
})
},
此时在$on中打印this.path值为data
但是data值并不会做更改并显示到页面中
##需要被传值的组件代码
<template>
<view>
<text>{{path}}</text>
</view>
</template>
<script>
export default {
name:'test',
data() {
return {
path:'asfas'
}
},
created(){
this.$bus.$off('sendMsg')
},
mounted() {
this.$bus.$on('sendMsg',(data)=>{
this.path = data
console.log(data)
console.log(this.path)
})
},
methods:{
}
}
</script>
试过将this.path值传递给data
this.path值能成功传递
请问要如何在点击之后传值并且实时更新插值表达式,也就是data中path的数据?