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

Question

在线程Which limitations v-model has in Vue 2.x? 中，我学习了如何链接父组件和子组件v-model。 suggested solution 是：

--- 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);
  }
}

how to write computed setters in class-based components in 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. 输入“a”
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 {
 
  }
}