关于 v-model 你需要知道的这一切！

素颜马尾好姑娘i 2022-11-14 11:49 366阅读 0赞

> 作者：Michael Thiessen  
> 译者：前端小智  
> 来源：news

> **点赞再看**，微信搜索\*\*【[大迁世界][Link 1]】**,B站关注**【[前端小智][Link 2]】\*\*这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

![image.png][]

Vue `v-model`是一个指令，它提供了`input`和`form`之间或两个组件之间的双向数据绑定。

这是Vue开发中的一个简单概念，但`v-model`的真正威力需要花些时间才能理解。

本文主要讲解`v-model`的不同用例，并学习如何在自己的项目中使用它。

### v-model 是什么？ ###

刚才讲过，\`\`v-model\`是一个我们可以在模板代码中使用的指令。指令是一个模板令牌，它告诉 Vue 我们想要如何处理 DOM。

在`v-model`的情况下，它告诉Vue我们想要在`template` 中的值和`data`属性中的值之间创建一个双向数据绑定。

使用`v-model`的一个常见用例是在设计表单相关的一些元素时。我们可以使用它使`input`元素能够修改Vue实例中的数据。

<template>
      <div>
        <input 
          type='text'
          v-model='value'
        />
        <p> Value: {
       { value }} </p>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          value: 'Hello World'  
        }
      }
    }
    </script>

当我们在`input`中输入内容时，我们会看到我们的数据属性正在变化

![1111.gif][]

#### v-model 和 v-bind 之间的区别？ ####

`v-bind`指令通常会与`v-model`切换。两者的区别在于`v-model`提供了双向数据绑定。

在我们的例子中，这意味着如果我们的数据改变了，我们的`input`也会改变，如果我们的`input`改变了，我们的数据也会改变。

而 `v-bind` 只以一种方式绑定数据。

当我们想在自己的应用中创建一个清晰的单向数据流时，这是非常有用的。但是，在`v-model`和`v-bind`之间选择时必须小心。

### v-model 的修饰符 ###

Vue 提供了两个修饰符，允许我们更改`v-model`的功能。每一个都可以像这样加起来，甚至可以连接在一起。

#### .lazy ####

默认情况下，`v-model`在每个`input`事件上与Vue实例的状态（数据属性）同步。 这包括获得/失去焦点等。

`.lazy`修改器修改了我们的`v-model`，所以它只在更改事件之后同步。这减少了v-model试图与Vue实例同步的次数，在某些情况下，还可以提高性能。

#### .number ####

通常，即使输入的是数字类型，`input`也会自动将输入的值变为字符串。确保将我们的值作为数字处理的一种方法是使用`.number`修饰符。

根据Vue文档，如果`input`发生变化，并且`parseFloat()`无法解析新值，那么将返回输入的最后一个有效值。

#### .trim ####

与大多数编程语言中的trim方法类似，`.trim`修饰符在返回值之前删除开头或结尾的空白。

### 在自定义组件中使用 v-model ###

在Vue中，数据绑定有两个主要步骤：

1.  从父节点传递数据
2.  从子实例发出事件以更新父实例

在自定义组件上使用`v-model`可以让我们传递一个 prop，用一个指令来处理一个事件。

<custom-text-input v-model="value" />
    
    
    
    <custom-text-input 
       :modelValue="value"
       @update:modelValue="value = $event"
    />

#### 这到底是什么意思? ####

使用`v-model`传递的值的默认名称是`modelValue`。但是，我们也可以像这样传递一个自定义名称。

<custom-text-input v-model:name="value" />

注意：当我们使用自定义模型名称时，发出的方法的名称将为`update:name`。

![image.png][image.png 1]

#### 在自定义组件中使用 v-model ####

在自定义组件中使用 v-mode ，需要做两件事：

1.  在 props 中接收 `v-model` 的值。
2.  当对应的值变化时，发出一个更新事件

ok，首先来声明一下：

export default {
      props: {
        modelValue: String,
      }
    }

接下来，将 modelValue 绑定到需要的元素，当值变化时，我们就通过`update:modelValue` 发出新值。

这样就可以实现双向绑定了。

![2222.gif][]

### v-model 的使用技巧 ###

上面介绍了如果在自定义组件中使用 `v-model`，现在来看看一些`v-model`指令更高级的用法。

#### 对一个组件多次使用v-model ####

`v-model`并不局限于每个组件只能使用一个。要多次使用`v-model`，我们只需要确保唯一命名，并在子组件中正确访问它。

为下面的组件添加第二个 `v-model`，这里先命名为 `lastName`:

<template>
      <div>
        <custom-text-input 
          v-model='value' 
          v-model:lastName='lastName'
        />
        <p> Value: {
       { value }} </p>
        <p> Last Name: {
       { lastName }} </p>
      </div>
    </template>
    
    <script>
    import CustomTextInput from './CustomTextInput.vue'
    
    export default {
      components: {
        CustomTextInput,
      },
      data() {
        return {
          value: 'Matt',
          lastName: 'Maribojoc'
        }
      }
    }
    </script>

然后，我们内部的子组件:

<template>
      <div>
        <label> First Name </label>
        <input 
          type='text'
          :value='modelValue'
          placeholder='Input'
          @input='$emit("update:modelValue", $event.target.value)'
        />
        <label> Last Name </label>
        <input 
          type='text'
          :value='lastName'
          placeholder='Input'
          @input='$emit("update:lastName", $event.target.value)'
        />
      </div>
    </template>
    
    <script>
    export default {
      props: {
        lastName: String,
        modelValue: String,
      }
    }
    </script>

运行后，可以看到两个 `v-model` 都可以正常工作：

![3333.gif][]

#### 自定义 v-model 的修饰符 ####

Vue中内置了一些修饰符，但这些远远不够，所以有时我们需要自定义自己的修饰符。

假设我们要创建一个修饰符，以删除输入的文本中的所有空格。 我们称之为`no-whitespace` ：

<custom-text-input 
      v-model.no-whitespace='value' 
      v-model:lastName='lastName'
    />

在组件内，我们可以使用 props 来捕获修改器。自定义修饰符的名称是`nameModifiers`

props: {
      lastName: String,
      modelValue: String,
      modelModifiers: {
        default: () => ({})
      }
    },

我们要做的第一件事是改变`@input`处理器来使用一个自定义方法。我们可以称它为`emitValue`，它接受正在编辑的属性和事件对象的名称。

<label> First Name </label>
    <input 
          type='text'
          :value='modelValue'
          placeholder='Input'
          @input='emitValue("modelValue", $event)'
    />

在`emitValue`方法中，在调用`$emit`之前，我们要检查修饰符。如果`no-whitespace`修饰符为`true`，则可以在将其发送给父对象之前修改该值。

emitValue(propName, evt) {
      let val = evt.target.value
      if (this.modelModifiers['no-whitespace']) {
        val = val.replace(/\s/g, '')
      }
      this.$emit(`update:${propName}`, val)
    }

运行，完美：

![4444.gif][]

## 总结 ##

希望本文能教给大家一些有关Vue v-model的新知识。

在它的基本用例(如表单和input数据)中，`v-model`是一个非常简单的概念。然而，当我们创建自定义组件并处理更复杂的数据时，我们可以释放`v-model`的真正威力。

~完，我是刷碗智，我要去刷碗了，我们下期见！

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://learnvue.co/2021/01/everything-you-need-to-know-about-vue-v-model/

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[Link 1]: https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA
[Link 2]: https://space.bilibili.com/31089477
[image.png]: /images/20221022/073d06c2595a4d5999928787465f4178.png
[1111.gif]: /images/20221022/d810575c2e47403b8b438369082a3281.png
[image.png 1]: /images/20221022/0a066f68d9144280b7f1c33a03372c30.png
[2222.gif]: /images/20221022/272d943f4bda408b8f4efbe3bfd8e788.png
[3333.gif]: /images/20221022/56f20fd1d00e4459adc82e7e2b0c8091.png
[4444.gif]: /images/20221022/26aef30079ff4b909cae702017548abd.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi