Vue Typescript 组件类属性初始化器的最佳实践

Question

我看到很多关于 Vue + Typescript 组件类的相互冲突的文档。

在哪里定义属性？在@Component 注释中概述的here?正如@Prop 注释的实例属性所概述的here?

在哪里初始化定义的属性？在构造函数中？在字段级属性定义中？

是否有关于这些内容的明确、最新的参考，或最新的示例应用程序？

这是我现在拥有的：

<template>
    <div class='contacts'>

        <b-form @submit="search">
            <b-form-group>
                <b-form-input v-model="q"></b-form-input>
            </b-form-group>

            <b-button type="submit" variant="primary">Search</b-button>
        </b-form>

        <b-table :items='contacts'></b-table>
    </div>
</template>

<script lang="ts">

    import {Component, Prop, Vue} from 'vue-property-decorator'

    @Component
    export default class Contacts extends Vue {
        constructor(options: any) {
            super(options);
            this.q = 'dummy data';
            this.contacts = [{
                'id': 1,
                'first_name': 'Lukas',
                'last_name': 'Stigers',
                'email': null,
                'gender': 'Male',
                'phone': '776-878-7222'
            }, {
                'id': 2,
                'first_name': 'Dari',
                'last_name': 'Matkin',
                'email': null,
                'gender': 'Female',
                'phone': '833-146-3305'
            }]
        }

        @Prop() private q: string

        @Prop() private contacts: any

        search(event:Event) {
            event.preventDefault();
            alert('You searched for ' + this.q)
        }
    }

</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: "q"

Answer 1

首先，您使用的似乎是vue-property-decorator，而不是vue-class-component。你可以找到vue-property-decoratorhere的github页面。

其次，您收到该错误是因为您使用@Prop() 声明了一个道具，但是您随后在构造函数中设置了它的值。如果你想为你的道具​​添加一个默认值，像这样将它添加到装饰器中

@Prop({ default: 'dummy data'})
private q: string;

如果您希望 q 成为组件数据的一部分，只需将其定义为类上的属性，而无需像这样的装饰器

private q: string = 'dummy data';

Answer 2

您应该使用 @Prop 装饰器的 default 参数：

@Prop({
  default: 'dummy data'
}) private q!: string