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

Posted

技术标签:

【中文标题】vue js 2:在挂载函数中访问道具【英文标题】:vue js 2: Access props in mounted function 【发布时间】:2017-12-29 14:56:25 【问题描述】:

我在子组件中有数据道具。在挂载函数的子组件内部,我需要从道具中获取特定值并设置选择下拉值。我正在使用运行良好的 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 函数中获得订阅,但每次值发生不需要的变化时都会调用它。我只需要第一次更改它即可设置下拉初始值。

【问题讨论】:

【参考方案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);
  
;

更新:

反正我不知道你是否需要下一个tick,尝试使用created函数 并且没有 nextTick。

created() 
  alert(this.Subscriptions);
,

【讨论】:

好的,我知道,但问题是我如何访问它并不重要,我只是在挂载函数中获取基于 0 的数组。 请告诉我你是如何将道具发送到这个对象的 对不起,我不明白你的说法。 我确实尝试过创建,但这也不起作用。它只是显示空数组。但在我看来,我将订阅数据用作下拉列表,并且它正在填充。但我无法在函数内部访问它。 能否请你创建一个小提琴,它会更容易看到实际发生的事情。【参考方案2】:

从道具接收数据:

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

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

【讨论】:

【参考方案3】:

我使用@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);
    
  
;

【讨论】:

【参考方案4】:

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

例子:

<ChildComponent :data="testData" />

下面可以代替上面的

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

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

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

【讨论】:

在我看来这是这个问题的最佳答案。 我在道具中有一个简单的字符串值。怎么可能在挂载的钩子中不可用?【参考方案5】:

我完全不使用道具解决了类似的问题。我改为从父组件触发子组件的方法,并传入一个参数。

这可以通过在父组件的模板中设置子组件元素的 ref 属性来完成,然后使用 this.$refs 从任何钩子或方法中访问该方法。

<template>
<child-component ref="name"/>
</template>

<script>
export default
mounted()
this.$refs.name.methodName(data);

</script>

这可以在各种情况下提供帮助 - 在发生某些事情时传递数据和/或触发方法,也可以使用子组件中的 this.$parent 来完成相反的操作。

【讨论】:

以上是关于vue js 2:在挂载函数中访问道具的主要内容,如果未能解决你的问题,请参考以下文章

如何在组件的方法中访问 Vue JS 道具?

Vue.js - 从模板内访问数据属性而不使用 vue 文件中的道具

在子 vue 组件数据函数中访问道具?

Vue js 子组件中未定义的道具。但仅在其脚本中

我可以在组件中访问的道具无法呈现

如何在 vuex 的挂载函数中访问存储数据