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;

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

1 个答案: