【笔记】vue中引用了其他组件 (比如Bus.js),如何使this重新指向当前组件?
在引用组件中使this重新指向当前组件关于vue组件的其他通信方式<父子组件通信、兄弟组件通信(Bus方式、Vuex方式)>请看我另一篇文章VueAwesomeSwiper轮播图组件存在同样问题在兄弟组件中采用Bus方式进行通信时:created() {Bus.$on("fromOther", function(data) {this.cur...
·
在引用组件中使this重新指向当前组件
关于vue组件的其他通信方式<父子组件通信、兄弟组件通信(Bus方式、Vuex方式)>请看我另一篇文章
VueAwesomeSwiper轮播图组件存在同样问题
###在兄弟组件中采用Bus方式进行通信时:
created() {
Bus.$on("fromOther", function(data) {
this.currentMsg = data; //当前this指向Bus组件
console.log(this.currentMsg);
});
},
- 由于this指向Bus所以无法对当前组件的currentMsg属性赋值,动态更新Dom。有以下方式解决可以这种问题
###第一种方式:
在最外层定义全局this对象
var that= {};
export default {
name:"vue-module",
data(){
return {
currentMsg:"from current module",
}
},
Created(){
Bus.$on("fromOther",function(data){
that.currentMsg = data; // that 指代当前的vue组件
})
},
beforeCreate(){
that = this; //将当前this赋值给that对象
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)