更改 Vue 组件中的 v-model 属性名称答案

【问题标题】：Changing v-model attribute name in Vue components更改 Vue 组件中的 v-model 属性名称
【发布时间】：2017-10-12 07:48:24
【问题描述】：

我们正在公司内部创建一个内部网络开发框架。我们正在 Vue 之上创建一个组件库。稍后将支持其他一些 Web 开发框架，例如 React。等等我们通过在我们自己的 Vue 组件中封装简单的表单控件并在模板中使用它们来做到这一点：

<our-input v-model="customerModel" />

我们要做的是，将“v-model”道具名称重命名为其他名称，以进一步抽象出对 Vue 的任何引用，以便我们可以轻松切换到另一个框架。

除了搜索和替换之外，还有什么想法吗？

【问题讨论】：

标签： vue.js

【解决方案1】：

在 Vuejs 2.2 中，您现在可以将值重命名为其他属性 (source)

内部组件：

Vue.component('OurInput', {
  model: {
    prop: 'customer',
    event: 'change'
  },
  props: {
    // use `customer` as the prop to take the place of `value`
    customer: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  // ...
})

使用 v-model 进行双向绑定：

<our-input v-model="customerModel" />

不使用 v-model 的双向绑定：

<our-input :customer="customerModel" @change="val => { customer = val }"/>

不要忘记在组件内部发出更改事件，或者只使用字段输入事件：

this.$emit('close');

【讨论】：

你想用“default: () { return {}; }”做什么？？ -- 它给出了一个错误，并且这个（好的）设置不需要工作。
@svenema 很好，我为该默认值修复了 ES6 语法。该冒号不应该存在，但出于 eslint 的目的，默认值应该是一个函数。有关规则，请参阅 [vue/require-valid-default-prop] (eslint.vuejs.org/rules/require-valid-default-prop.html)。根据组织指南，我们明确声明默认值，即使它们为空但不需要运行。

【解决方案2】：

我猜这不可能，因为v-model 是 vue 提供的内置指令。

但是由于v-model无非就是绑定输入value并在输入上添加一个事件监听器来监听任何更新并更新输入的value。

所以：

<our-input v-model="customerModel" />

等同于：

<our-input :value="customerModel"  @input="value => { customerModel = value }">/>

也许这可以帮助你。更多详情见custom component input handling

【讨论】：

感谢您的帮助。如果我使用 v-model 并从我的自定义组件发出 'input' 事件，则双向绑定在父组件上起作用。如果我在您提供的链接中应用代码，我需要显式处理父级上发出的事件，这会破坏自动双向绑定。
@ÉlodiePetit 但这就是 v-model 指令在幕后所做的......它只是语法糖