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 不能做什么？

【问题讨论】：

标签： vue.js vuejs2

【解决方案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 之前转换数据。

【讨论】：