介绍

该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 使用它们的checkedprop 并监听它们的change事件。

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

添加v-model到自定义组件

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

让我们创建一个名为 的示例组件basic-input。我们将使用 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，组件接受一个valueprop 并发出一个input事件。

像这样使用组件：

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

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

定制v-model prop和event

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

要为我们的组件自定义event和 ` prop, we add amodel` 属性并定义新值，如下所示：

// ...

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" />

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

使用v-model上contenteditable

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

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

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

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

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

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

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

您还可以使用 a 的内容ref而不是根元素的内容。

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

结论

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

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