javascript - 在Vue中，如何在Typescript语法中定义使用prop作为其初始值的本地数据属性？

将 Prop 传递给Vue中的子组件时，documentation表示:

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

我们正在使用 typescript 。 “定义本地数据属性”的语法如下(to my understanding):

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  // Data property
  myDataProperty: string;
</script>

Prop 的语法是:

@Component
export default class App extends Vue {
  // Makes a "exampleProperty" a component prop with the default value of 'Example'
  @Prop({default: 'Example'})
  exampleProperty: string
}

因此，我们尝试遵循文档，最后得到:

parentComponent.vue

<template>
  <childComponent testProperty='test' />
</template>

childComponent.vue

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

@Component
export default class childComponent extends Vue {
  @Prop(
    {
      default: 'notTest',
      validator: (component) => {
        return [
          'notTest',
          'test',
        ].indexOf(component) > -1;
      },
    },
  )
  testProperty!: string;
  testProperty = this.testProperty;
</script>

可以预见，这与`重复标识符testProperty'错误。

因此，我们尝试

...
      testProperty!: this.testProperty;
...

导致



因此，我决定尝试"vue-class-component" decorator.

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

@Component({
  data: function(){
    return {
      testProperty: this.testProperty,
    }
  }
})
export default class childComponent extends Vue {
  @Prop(
    {
      default: 'notTest',
      validator: (component) => {
        return [
          'notTest',
          'test',
        ].indexOf(component) > -1;
      },
    },
  )
  testProperty!: string;
  testProperty = this.testProperty;
</script>

这导致错误Property 'testProperty' does not exist on type 'Vue'.
我想在处理程序中在某个时候执行this.testProperty = 'newProperty'，但是不能，因为那样会直接修改 Prop 。

如何定义将prop作为Typescript的初始值的本地数据属性？

编辑:

如果我不做上述任何事情，只需定义prop，而无需尝试定义使用prop作为其初始值的本地数据属性，然后执行

this.testProperty ='测试'

在处理程序中，此错误显示在chrome控制台中:

最佳答案

我将我的评论总结为一个连贯的答案:您所看到的问题是，您已经通过将this.testProperty声明为prop来定义了testProperty = this.testProperty:进行@Prop充其量只是一个循环引用。单独使用ojit_code装饰器将完成模板中属性到变量的映射。

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

@Component
export default class childComponent extends Vue {
  @Prop(
    {
      default: 'notTest',
      validator: (component) => {
        return [
          'notTest',
          'test',
        ].indexOf(component) > -1;
      },
    },
  )
  testProperty!: string;

  // Map prop to local data property
  testPropertyLocal = this.testProperty;
</script>

另外，请记住以下警告:VueJS properties must be kebab-case in templates and camelCase in JS。因此，您需要将子组件引用更新为:

<template>
  <childComponent test-property='test' />
</template>