(vue.js)vue中引用了别的组件，如何使this指向Vue对象

转载于 2018-11-07 15:53:00 发布 · 741 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dreamyu/p/9923011.html

文章标签：

#javascript #ui #ViewUI

本文介绍在Vue中解决组件间传值时遇到的this指向问题，通过保存当前Vue实例的引用，确保在监听事件时能正确更新组件状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue中引用了别的组件，如何使this指向Vue对象

今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的组件, this指向发生改变,所以通过以下办法解决。

var _this = {}

export default {
    
    data(){
        return {
          msg: '11'
        }
    },
    beforeCreate(){
        _this = this;
      },
    mounted(){
          VueEvent.$on('to-news',function (data) {
             //改变msg的值
              _this.msg = data;
             //这里如果直接使用this, 指向的是VueEvent这个实例, 而不是外面的Vue对象
          })
      }
}