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

Posted 2023-02-23

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

【英文标题】：Computed getter/setter for vue-models (therefore, "props") in vue-class-component syntax

【发布时间】：2020-11-17 09:47:17

【问题描述】：

在线程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);
  

假设初始值为空字符串。

输入“f” 日志将是"checkpoint" "" 输入“a” 日志将是"checkpoint" "f" 输入“d” 日志将是"checkpoint" "fa"

等等。

【问题讨论】：

我认为这不是最好的方法。你不应该直接改变道具。为什么不能直接将 value 道具放在模板中。类似<input :value="value">

@Tony，谢谢你的回答。使用EditorImplementation(:value="value" @input="(value) => onInput(value) ")，在@Emit("input") private onInput(value: string): void console.log(this.value); 中，我总是得到以前的value 的输出，而不是实际的。例如。在第一次输入时，value 仍然是空字符串。正常吗？

您好，请编辑帖子并添加此功能以提高可读性。

@Tony，Roger，完成了。

【参考方案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 
 
  

【讨论】：

感谢您的回答。所以，value 不会在 TextEditor 内部更改为 localValue，不是吗？文档中是否对此进行了解释？

使用localValue，您可以使用 v-model 更改文本输入的值（这确保了双向绑定）。您可以看到更多关于如何在自定义组件上使用 v-model 的 here（这就是 EditorImplementation 组件。This 显示了如何将 v-model 与 html 元素一起使用。

关于 props 更改，您可以从技术上更改子组件中的 props，但是如果值从父组件更改，则值（在子组件中更改）将被覆盖，这就是它的原因灰心。在这种情况下，您似乎想从子组件向父组件发出一个值。使用 v-model，您可以更改子组件中文本输入的值，并将值发送到父组件，而无需担心值被覆盖。

好的，谢谢您的解释！我接受了你的好回答。