如何使用 Prop 值初始化数据属性 [英] How to Initialize Data Properties with Prop Values
问题描述
在 VueJS 中仍然有点年轻，但我喜欢它的每一点.但现在，固定在某个地方.
我想使用通过 props 传递的值初始化 data() 中的一些值.这样我以后就可以改变它们，因为不建议改变组件内的 props.事实上 official docs 推荐使用 prop 来初始化这个属性值如下图:
{道具:['initialCounter']，数据:函数(){返回 { 计数器:this.initialCounter }}我有类似下面的内容:
<div class="well"><!-- 直接在模板上使用 Prop 值:有效(但对初始化数据没有帮助)-->部门:{{部门名称}}<!-- 使用 prop 值但通过计算属性获取:在模板内工作但不在初始化中 -->部门:{{fetchDepartment.name}}<!-- 使用我用 prop 值初始化的数组:不起作用 -->部门:{{this_department.name}}</模板><脚本>导出默认{name: '测试',道具:['部门']，数据() {返回 {this_department: this.department//下面也不起作用//this_department: this.fetchDepartment}},创建(){//显示空数组console.log(this.department)},安装(){//显示空数组console.log(this.department)},计算:{获取部门(){返回 this.department}}}
如上面注释部分所示，初始化不成功.this.department 的值也不会出现在 created() 或 mounted() 挂钩中.请注意，我可以看到它是使用 Chrome Vue Devtools 定义的.所以我的问题是，我应该如何使用 props 值初始化 data() 属性，或者哪种方法是解决这个问题的最佳方法?
我知道我的答案来晚了，但它对我有帮助，希望其他人来这里.当道具的数据异步时:
//在父组件中<模板><child :foo="bar" v-if="bar"/></模板>这样，您在 props 可用时渲染组件，从而更安全地遵循指南推荐的方法来使用 props 初始化数据值:
props: ['initialCounter'],数据:函数(){返回 {计数器:this.initialCounter}}快乐编码！
Still a little bit young in VueJS but I'm loving every bit of it. But now, fixated somewhere.
I want to initialize some values in data() using values passed via props. This is so that I can be able to mutate them later on, since it is not recommended to mutate props inside a component. In fact the official docs recommend this property initialization using prop values as shown below:
{
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
I have something like the one below:
<template>
<div class="well">
<!-- Use Prop value directly on the template: works (but of no help in initializing data) -->
Department: {{department.name}}
<!-- Use prop value but gotten via computed property: Works inside the template but not in the initialization -->
Department: {{fetchDepartment.name}}
<!-- Use the array I initialized with the prop value: Does not work -->
Department: {{this_department.name}}
</div>
</template>
<script>
export default {
name: 'test',
props: ['department'],
data() {
return {
this_department: this.department
// below does not work either
//this_department: this.fetchDepartment
}
},
created() {
// shows empty array
console.log(this.department)
},
mounted() {
// shows empty array
console.log(this.department)
},
computed: {
fetchDepartment() {
return this.department
}
}
}
</script>
As seen in the commented sections above, the initialization is not successful. Neither does the value of this.department appear either from the created() or the mounted() hooks. And note, I can see it is defined using the Chrome Vue Devtools. So my question is, how exactly should I initialize data() attributes using props values, or which is the best way of going around this issue?
I know my answer comes in late but it helps me and hopefully someone else coming here. When props' data are async:
// in the parent component
<template>
<child :foo="bar" v-if="bar" />
</template>
That way, you render the component when props are already available making it safer to follow the guide's recommended ways to initialize data value with props as so:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
Happy coding!
这篇关于如何使用 Prop 值初始化数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
