Question

VueJS还有点年轻，但我很喜欢它的每一点。但现在，在某处固定我想使用data()传递的值初始化props中的某些值。这样我以后就可以改变它们，因为不建议在组件内改变道具。事实上，official docs建议使用prop值初始化此属性，如下所示：

{
props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

我有类似下面的内容：

<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>

如上面评论部分所示，初始化不成功。 this.department的值也不会出现在created()或mounted()个钩子中。请注意，我可以看到它是使用Chrome Vue Devtools定义的。所以我的问题是，我应该如何使用data()值初始化props属性，或者解决此问题的最佳方法是什么？

Answer 1

我知道我的答案来晚了，但是它可以帮助我，希望其他人可以来这里。当道具的数据不同步时：

// in the parent component
<template>
    <child :foo="bar" v-if="bar" />
</template>

这样，您可以在props可用时渲染组件，从而可以更安全地遵循指南建议的使用props初始化数据值的方法：

props: ['initialCounter'],
data: function () {
    return {
       counter: this.initialCounter
    }
}

编码愉快！

Answer 2

计算属性是提供prop的可变版本的最简单方法，但您可能不希望在更新prop时丢失数据。你可以使用一个明确的手表。

俪

虽然计算属性在大多数情况下更合适，但在那里   是需要自定义观察者的时候。这就是Vue提供的原因   通过watch选项对数据更改做出反应的更通用方法。   当您想要执行异步或昂贵时，这非常有用   响应不断变化的数据的操作。

当您想要执行异步或昂贵时，这非常有用响应不断变化的数据的操作。

Answer 3

您可以修改道具。使用'.sync'修饰符。我经常使用它，因为它方便直观。这需要发出事件来更新父级的值。我不确定它是如何导致维护问题的警告。

如果我想修改一个值而不更新父级，我使用的另一种方法是使用Lodash克隆。例如（假设它在安装时可用）

mounted(){
    this_department = _.clone(this.department)
}

如果你一直想改变道具并让它与父改变，那么使用计算属性。但是，在大多数情况下，您将希望依赖于组件中的数据状态并使用其他函数更改它，因此计算属性将不是您需要的。

如何使用Prop值初始化数据属性

3 个答案: