v-model 在 Vue 2.x 中都有哪些限制？

Posted 2023-02-22

【中文标题】v-model 在 Vue 2.x 中都有哪些限制？

【英文标题】：Which limitations v-model has in Vue 2.x?v-model 在 Vue 2.x 中有哪些限制？

【发布时间】：2020-11-11 16:19:59

【问题描述】：

也许v-model 的以下问题有解决方案，但我没有看到相应的文档。

“链接”v 模型：e。 G。我们希望自定义组件具有v-model，并且这个v-model 与子<input> 的元素的v-model 相关。 使用对象（包括数组，这是 ECMAScript 的object 的特殊情况）作为v-model。 修改数据：e。 G。用户只输入数字，但组件发出的值是逗号分隔的数字（例如，iser 的输入：“4545667”，发出的值：“4,545,667”）

我研究的第一个问题：v-model 不能做什么？

【参考方案1】：

v-model="formData" === v-bind:value="formData" v-on:input="formData = $event.target.value"。这不是一个可以做所有事情的神奇命令，而是编写基本功能的一种更短的方法。

要获得所需的行为，您必须编写自己的组件来获取值并对其进行处理。

要在多层组件之间链接 v-model，您需要 $emit 新数据，而不是更改组件状态的默认行为。最简单的方法是使用a computed getter/setter。我使用下面的代码来传递任何东西，从简单的值到整个对象，再到处理绑定到不同 html 输入的自定义输入组件。

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

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

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

如果您需要在发送之前从输入转换数据（例如格式化），您可以使用计算值或方法在设置器中 $emit 之前转换数据。