在 vue-class-component 语法中为 vue-models 计算 getter/setter（因此，"props"）

Question

线程中 Which limitations v-model has in Vue 2.x?, I learned how to link parent and child components v-model. The 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);
  }
}

问题 的答案不适用于 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 {
 
  }
}