Vue数据已变更但视图未更新求助：embedData控制台有值但页面渲染为空

嘿，我一眼就揪出问题核心啦！你在mounted钩子中注册EventBus回调时用了普通函数，导致**this的上下文完全不对**——这里的this指向的是回调函数本身，而非你的Vue组件实例，所以你给this.embedData赋值根本没更新到组件的data属性里，视图自然就显示为空了。

两种快速修复方案 #

方案1：用箭头函数继承组件上下文

箭头函数会自动继承父级作用域的this（也就是你的组件实例），修改后的代码如下：

mounted: function() {
  EventBus.$on('HTML', (payLoad) => {
    this.embedData = payLoad
    console.log('payLoad:' + this.embedData);
    console.log('arrived');
  });
}

方案2：用bind(this)手动绑定上下文

如果你更习惯用普通函数，可以手动把this绑定到组件实例上：

mounted: function() {
  EventBus.$on('HTML', function (payLoad) {
    this.embedData = payLoad
    console.log('payLoad:' + this.embedData);
    console.log('arrived');
  }.bind(this));
}

额外重要提醒：渲染HTML内容需用v-html #

你拿到的payLoad是HTML字符串（iframe标签），如果直接用{{embedData}}只会渲染成纯文本，不会解析成实际的视频播放器。要正确渲染HTML，需要把模板里的{{embedData}}改成：

<div v-html="embedData"></div>

另外还有个小冗余点：你在oEmbed组件的mounted里也重复注册了HTML事件的监听，这会导致同一事件被多次触发，建议把oEmbed里的这段监听代码删掉，只在父组件里处理就好啦。

内容的提问来源于stack exchange，提问作者Roberto Pezzali