如何在Vuejs中使用Typescript创建计算属性

Question

我在浏览器Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dataElements"中不断收到此错误

我的组件中有@Prop() private dataElements: any[];。该道具由父母和孩子改变，也可能需要观察者在改变时进行一些操作。

如何从中创建计算属性？

Answer 1

从Vue开始，您永远不必突变prop（已通过父级传递给子级组件），因为您在子级组件中所做的任何操作-父级始终可以更改和覆盖prop的值（如错误消息中所述）。

要对传入的prop进行突变，必须在子组件中定义一个本地使用的变量。对于您而言，这可以通过computed属性来完成，该属性仅根据您的prop返回一个新创建的数组。

computed: {
    elements() {
        return [...this.dataElements]
    }
}

对数组的任何更改都应始终通过发出事件报告给父对象，该事件最后将处理适当的突变并将prop重新传递给孩子。