咖啡休息期间的 Vue - 使用带有自定义组件的 v-model。

本系列的目的是发布有关高级 Vue 概念的技巧和窍门，这些技巧和窍门可以快速应用于每个应用程序，并为您提供解决问题的新武器。

在这篇短文中，我将解释它v-model的工作原理以及如何将其应用于每个 Vue 组件。

理解 v-model

v-model是几乎每个 Vue 应用程序中都会用到的常见指令。它通常用于在表单元素上启用双向数据绑定，并且与、input、checkbox和select完美配合。textarearadio

在下面的例子中，元素v-model上应用的input绑定someVal变量与value输入的本机属性。

<input v-model="someVal">

然后，该指令监听本机input事件并someVal在每次发出时进行更新。

因此，我们可以将上述代码重写为众所周知的事件和道具，以达到相同的效果：

<input
  v-bind:value="someVal"
  v-on:input="someVal = $event.target.value"
>

这就是v-model应用于常规输入的底层工作原理。

了解了这一点，我们就可以v-model在每个发出input事件并接受valueprop 的组件上使用它。

看看这个MagicCounter：

<template>
  <div>
    <button @click="changeValue(value-1)">-</button>
    <span>{{ value }}</span>
    <button @click="changeValue(value+1)">+</button>
  </div>
</template>

<script>
export default {
  props: ["value"],
  methods: {
    changeValue(newVal) {
      this.$emit("input", newVal);
    }
  }
};
</script>

input由于我们在每次改变时都会发出具有新值的事件并接受valueprop，因此我们可以安全地v-model在此组件上使用指令：

<MagicCounter v-model="count" />

将 v-model 与自定义组件结合使用

事件思想input和value事件对是默认设置v-model，根据输入类型，这些绑定可能会有所不同（强烈建议查看其源代码以了解详情）。例如，在checkbox元素中使用checked属性和事件来代替默认的属性。change

事实证明，我们可以v-model通过model属性来自定义指令接受的事件/属性对。例如，对于元素来说，它看起来可能是这样的checkbox：

model: {
  prop: 'checked',
  event: 'change'
}

您可能希望将我们发出的事件的名称更改MagicCounter为更具描述性的名称（例如modified）。

让我们看看如何让这个自定义事件与v-model

<template>
  <div>
    <button @click="changeValue(value-1)">-</button>
    <span>{{ value }}</span>
    <button @click="changeValue(value+1)">+</button>
  </div>
</template>

<script>
export default {
  props: ["value"],
  model: {
    event: `modified`
  },
  methods: {
    changeValue(newVal) {
      this.$emit("modified", newVal);
    }
  }
};
</script>

..瞧！现在你已经知道如何使用v-model每个 Vue 组件了。希望你能很快找到运用这些知识的方法。

您可以在这里找到一个带有来自帖子的代码的工作示例以供使用。

请继续关注该系列的下一部分！