从组件 VM 中的主 Vue.js 实例访问变量答案

【问题标题】：Accessing variable from main Vue.js instance in component VM从组件 VM 中的主 Vue.js 实例访问变量
【发布时间】：2016-07-30 06:04:21
【问题描述】：

这是一个非常简单的 Vue 应用程序，它将一个 prop 从主 VM 传递到一个组件。这个值是在我的实际应用中通过 vue-resource 获取的。

https://jsbin.com/tazuyupigi/1/edit?html,output

当然可以，但我很难从组件 VM 本身访问这个值。

https://jsbin.com/hurulavoko/1/edit?html,output

如您所见，我的警报显示未定义。我怎样才能解决这个问题？似乎是执行顺序的问题，但使用compiled() 或created() 代替ready() 没有区别。

【问题讨论】：

标签： javascript vue.js vue-resource

【解决方案1】：

这是执行顺序的问题。主 Vue 实例在它里面的东西被编译之前还没有“准备好”。这包括hello 组件。

如果您需要在使用之前知道bar 已设置，您可以通过多种方式对其进行监控。您可以 $broadcast 在父事件中让孩子知道 bar 已加载。或者您可以在子组件中使用watch 函数在bar 更新时进行更改。

如果您在created() 中使用$set bar，则您的示例确实有效，但是对于vue-resource，您无论如何都会有延迟，因此您需要考虑greeting 不会在孩子的ready() 功能期间做好准备。您要么必须设计 DOM 结构来处理 greeting 可能是 undefined 的事实，要么您必须使用事件或 watch 函数自己等待它。

以$broadcast 为例：

Vue.component('hello', {
  template: 'From hello tag: {{ greeting }}',
  props: ['greeting'],
  ready: function() {

  },
  events:{
    'bar-ready':function(){
        alert(this.greeting)
    }
  }
});
new Vue({
    el: '#app',
    created: function() {
        this.$http.get('/path')
            .then(function(response){
                this.$set('bar',response.data);
                this.$broadcast('bar-ready')
            }.bind(this))
    }
});

$broadcast 文档：https://vuejs.org/api/#vm-broadcast

【讨论】：

忽略之前的评论，这只是我的一个错字。广播系统让一切都为我工作。谢谢！