Question

我在子组件中有数据道具。在安装函数内部子组件我需要从props获取特定值并设置选择下拉值。我正在使用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和更新的函数中，但是每当值发生变化时就会调用，这是不需要的。我只需要第一次更改它以设置下拉初始值。

Answer 1

为什么要尝试通过'$ 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);
  }
};

<强>更新

无论如何，我不知道你是否需要下一个刻度，尝试使用创建的功能没有nextTick。

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

Answer 2

从道具接收数据：

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

        vm.$nextTick(function () {      
           console.log(vm.Subscriptions);
        });
    },

Answer 3

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

示例：

<ChildComponent :data="testData" />

可以代替上面的内容使用

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

，以便仅当testData可用子组件时才会呈现。但是，如果在子组件中还有更多的事情要显示，直到数据输入更好以使用另一个组件。并且添加观察者也可以解决问题，但不能以一种很好的方式解决。

由于您在更新的挂钩中获取了值，因此可能是这种情况。

Answer 4

这是我的解决方案，虽然不完善但有效。

mounted () {
 setTimeout(() => {
      console.log('Subscriptions')
  }, 2000)
}

Answer 5

我使用@watch解决了类似的问题。也许这行得通吗？

module.exports = {
  props: ["Subscriptions"]

  // this mounted is probably not necessary
  mounted: function () {
    getSubscriptions(this.Subscriptions)
  },  

  watch: {
    Subscriptions: [{
      handler: 'getSubscriptions'
    }]
  },

  methods: {
    getSubscriptions(el) {
      console.log(el);
    }
  }
};

vue js 2：在已安装的功能中访问道具

5 个答案: