在引用组件中使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对象
	}
}
Logo

前往低代码交流专区

更多推荐