【笔记】vue中引用了其他组件 (比如Bus.js),如何使this重新指向当前组件?

在引用组件中使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对象
	}
}
发布了65 篇原创文章 · 获赞 8 · 访问量 7万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览