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

Question

这是一个非常简单的 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() 没有区别。

Answer 1

是执行顺序的问题。主 Vue 实例在编译完其中的内容之前不会“准备好”。这包括 hello 组件。

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

如果你在 created() 中 $set bar，那么你的示例确实有效，但是使用 vue-resource无论如何你都会有延迟，所以你需要考虑这样一个事实，即 greeting 在 child 的 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