vuejs 打字稿和子组件“避免直接改变道具”

Question

我在这里转圈。

我有一个 vuejs2 应用程序启动并使用 typescript 运行，但是当我尝试将数据传递给源自商店的子组件时遇到错误。

<template>
    <div>
       <form-error :error422.sync="errors"></form-error>
    </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import FormError from '@/components/FormError422.vue';
  import cloneObj from '@/utils/cloneObj';

  @Component({
    components: {
      FormError,
    },
  })
  export default class RegisterForm extends Vue {
    get errors() {
      return cloneObj(AuthenticationModule.errorRegister);
    }
</script>

孩子

<template>
  <div>
    {{error422.errors}}
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Generic422 } from '@/ms-authentication'

@Component
export default class FormError422 extends Vue {
  @Prop() private error422: Generic422 = {
    errors: [],
  };
}
</script>

但无论我做什么都会引发警告：

[Vue warn]: 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: "error422"

Answer 1

我认为您正在尝试将error422 默认值设置为：

errors: [],

您通过= 分配直接在FormError422 类中设置它。

这不是您应该使用@Prop() 装饰器设置默认值的方式。相反，您是直接改变道具，而不是设置默认值。

因此，Vue 会警告你，因为你不应该这样做。

要使用 @Prop 装饰器设置 prop 默认值，请执行以下操作：

@Prop({default: {errors: []}}) private error422!: Generic422;