Question

将道具传递到Vue中的子组件时，documentation表示：

此外，每次更新父组件时，子组件中的所有道具都会以最新值刷新。这意味着您不应该尝试在子组件内部变异道具。如果这样做，Vue会在控制台中警告您。

该道具用于传递初始值；子组件随后希望将其用作本地数据属性。在这种情况下，最好定义一个使用prop作为其初始值的本地数据属性：

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

我们正在使用打字稿。 “定义本地数据属性”的语法如下（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>

道具的语法是：

@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;
...

导致

重复的标识符“ testProperty”。属性“ testProperty”没有初始化程序，并且在构造函数中未明确分配。后续的属性声明必须具有相同的类型。属性“ testProperty”的类型必须为“ this”，但此处的类型为“ any”。

所以，我决定尝试"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'，但是不能，因为那样会直接修改道具。

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

编辑：

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

this.testProperty ='test'

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

vue.runtime.esm.js [Vue警告]：避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“ testProperty”

Answer 1

我将我的评论总结为一个连贯的答案：您所看到的问题是，您已经通过声明this.testProperty为道具来定义testProperty = this.testProperty：充其量@Prop是一个循环引用。单独使用<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>装饰器将模板中的属性映射到变量。

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

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

export

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

1 个答案: