typescript - vue-class-component 语法中 vue-models（因此，“props”）的计算 getter/setter

Question

在线程 中 v-model 在 Vue 2.x 中有哪些限制？，我学会了如何链接父子组件v-model。建议的解决方案是：

--- ParentTemplate:
<Child v-model="formData"></Child>

-- ChildTemplate:
<input v-model="localValue">

-- ChildScript:
computed: {
    localValue: {
      get() {
        return this.value;
      },
      set(localValue) {
        this.$emit('input', localValue);
      },
    },
  },

不幸的是，我无法将其重写为vue-class-component语法。下面的代码既不工作也不应该工作：

export default class TextEditor extends Vue {

  @Prop({ type: String, required: true }) private readonly value!: string;


  private get localValue(): string {
    return this.value;
  }

  private set localValue(newValue: string) {
    this.$emit("input", newValue);
  }
}

关于如何在 vuejs 中基于类的组件中编写计算设置器的问题的答案不适用于 vue 组件属性，因为属性是只读的。所以我不能写this.value = newValue。

直接value使用有问题##

<EditorImplementation 
  :value="value" 
  @input="(value) => { onInput(value) }" 
/>

@Component({
  components {
    EditorImplementation: CK_Editor.component
  }
})
export default class TextEditor extends Vue {

  @Prop({ type: String, required: true }) private readonly value!: string;


  @Emit("input")
  private onInput(value: string): void {
    console.log("checkpoint");
    console.log(this.value);
  }
}

假设初始值为空字符串。

1. 输入“f”
2. 日志将是"checkpoint" ""
3. 输入“一”
4. 日志将是"checkpoint" "f"
5. 输入“d”
6. 日志将是"checkpoint" "fa"

等等。

Answer 1

目前，您似乎从父级获取输入值，然后更改该值，并将该值发送回父级。这似乎是一种反模式。

请试试这个

您的EditorImplementation组件将类似于

 <input
  ....
  :value="value"
  @input="$emit('input', $event.target.value)"
 />
 
@Prop({default: ''}) readonly value!: string

接着

<EditorImplementation 
  v-model="localValue"
  @input="(value) => { onInput(value) }" 
/>

然后像以前一样将它导入到文本编辑器文件中

@Component({
  components {
    EditorImplementation: CK_Editor.component
  }
})
export default class TextEditor extends Vue {
  private localValue = '';

  @Emit("input")
  private onInput(value: string): void {
 
  }
}