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:在挂载函数中访问道具的主要内容,如果未能解决你的问题,请参考以下文章