vue js 2：在挂载函数中访问道具

Question

我在子组件中有数据道具。在挂载函数的子组件内部，我需要从道具中获取特定值并设置选择下拉值。我正在使用运行良好的 vue-multiselect 插件。这是代码。

 module.exports = {
    props: ["Subscriptions"]
    mounted: function () {
        let vm = this;

        Vue.nextTick(function () {
        // I want to access props here but it return 0 length array
            console.log(vm.$parent.Subscriptions);
        });
    },
    beforeUpdate() {
        let vm = this;
        console.log(vm.$parent.Subscriptions);
    },
//  updated() {
//      let vm = this;
//      console.log(vm.$parent.Subscriptions);
//  }
};

现在，我唯一获得订阅的时间是在 beforeUpdate 和 updated 函数中，但是每次发生不需要的值更改时都会调用它。我只需要第一次更改它即可设置下拉初始值。

原文由 Epistemologist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个常见的错误可能是，父组件将一个变量作为道具传递，该道具在子组件被渲染时为空。因此，当您在安装在子组件中访问它时。您将其视为空值。稍后，在 Parent 组件中，传递的变量 (prop) 将被分配来自异步操作的值。为了避免可能的陷阱，最好使用 v-if。

例子 ：

 <ChildComponent :data="testData" />

可以用下面代替上面

<ChildComponent v-if="testData" :data="testData" />

这样只有当 testData 可用的子组件才会被渲染。但是，如果在子组件中你还有更多的东西要显示，直到数据更好地使用另一个组件。添加观察者也可以解决问题，但不是很好。

由于您在更新的钩子中获得值，可能就是这种情况。

原文由 dilantha111 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你为什么试图通过’$parent’访问当前的组件道具？

它应该像这样工作：

  module.exports = {
  props: ["Subscriptions"],
  mounted: function () {
      let vm = this;

      Vue.nextTick(function () {
        console.log(vm.Subscriptions);
      });
  },
  beforeUpdate() {
    console.log(this.Subscriptions);
  },
  updated() {
    console.log(this.Subscriptions);
  }
};

更新：

无论如何，我不知道你是否需要 next Tick，尝试使用 created 函数并且不使用 nextTick。

 created() {
  alert(this.Subscriptions);
},

原文由 V. Sambor 发布，翻译遵循 CC BY-SA 3.0 许可协议