如何为自定义Vue.js组件添加v-model支持

介绍

v-model 指令是与 Vue.js 捆绑在一起的少数指令之一。 该指令允许我们的数据和视图之间的双向数据绑定。

使用双向数据绑定，当我们通过输入字段或其他控件更新数据时，我们可以修改 DOM（文档对象模型），而无需进行 DOM 工作。

在本文中，您将探索该指令的工作原理并将其用于您自己的组件。

了解 v-model 如何在内部工作

根据我们对 HTML 的了解，我们知道 input、select 和 textarea 是我们向应用程序提供数据的主要方式。

为了使 v-model 工作，它期望相关元素或组件接收一个 prop（默认为 value）并发出一个事件（默认为 input）。

根据元素，Vue 决定如何监听和处理数据。 对于 input 元素，您可以像这样使用 v-model ：

<input v-model="email" />

v-model 转换为：

<input :value="email" @input="e => email = e.target.value" />

Vue 使用此扩展来处理 textarea、select 和其他一些 input 类型。

对于单选按钮和复选框，Vue 使用它们的 checked 属性并监听它们的 change 事件。

对于可以接受多个值的 select 标签和复选框等元素，Vue 将自动返回一个选定值的数组。

添加 v-model 到自定义组件

为了让我们的组件支持 v-model 双向绑定，组件需要接受 value 属性并发出 input 事件。

让我们创建一个名为 basic-input 的示例组件。 我们将使用 Vue 的 单文件组件 ：

基本输入.vue

<template>
  <input @input="handleInput" />
</template>

<script>
export default {
  prop: ['value'],
  data () {
    return {
      content: this.value
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', this.content)
    }
  }
}
</script>

为了支持 v-model，组件接受 value 属性并发出 input 事件。

像这样使用组件：

<basic-input v-model="email" />

这样，自定义组件支持 v-model 双向绑定。

自定义 v-model prop 和 event

让我们更进一步。 我们可能不想使用默认的 event 和 prop 来为我们的组件添加 v-model 支持。 值得庆幸的是，Vue 允许我们自定义它。

要自定义 event 和 ``prop，我们将 model 属性添加到我们的组件并定义新值，如下所示：

基本输入.vue

// ...

export default {
  prop: ['hidden'],
  model: {
      prop: 'hidden',
      event: 'blur'
  }
  methods: {
      handleInput (value) {
          this.$emit('blur', value)
      }
  }
}

// ...

这一次，当您像这样使用组件时：

<basic-input v-model="email" />

Vue 会自动将其转换为：

<basic-input :hidden="email" @blur="e => email = e.target.value" />

有了这个，您可以在定义组件的道具和事件时避免冲突。

在 contenteditable 上使用 v-model

内容可编辑 元素是 div 或类似的元素，可以配置为作为输入工作。

我们通过向元素添加 contenteditable 属性来定义内容可编辑元素：

<div class="editor" contenteditable="contenteditable"></div>

您将为 WYSIWYG 编辑器使用内容可编辑元素，因为它们更易于使用并且受到大量 浏览器 的支持。

v-model 将适用于内容可编辑元素，但您需要显式使用元素的内容，否则将不会发出内容。

要发出内容，您需要抓取 div 的 innerText 或 innerHTML。 因此，我们的 updateInput 方法需要如下所示：

updateInput () {
  this.$emit('input', this.$el.innerText)
}

您还可以使用 ref 的内容代替根元素的内容。

有了这个，v-model 将适用于内容可编辑元素。 您还可以在 updateInput 方法中更新 this.content。

结论

现在您已经了解了如何将 v-model 与自定义 Vue 组件一起使用，您可以构建或重构需要使用 v-model 的组件。

如需进一步阅读，请参阅 v-model 的 官方文档或查看 Vue.js 主题页面 了解更多练习或项目。