Question

我看到很多有关Vue + Typescript组件类的文档。

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

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

是否有关于这些事情的最新的权威性参考，或最新的示例应用程序？

这就是我现在拥有的：

<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-decorator here的github页面。

第二，由于使用@Prop()声明了一个prop，但是却在构造函数中设置了它的值，因此出现了该错误。如果您想要prop的默认值，可以像这样将其添加到装饰器中

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

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

private q: string = 'dummy data';

Answer 2

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

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

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

2 个答案: