Vue.js 中的 v-model 是如何工作的？

当前位置：技术文章>> Vue.js 中的 v-model 是如何工作的？

文章标题：Vue.js 中的 v-model 是如何工作的？

文章分类: 后端
8031 阅读

`v-model` 是 Vue.js 中的一个非常强大的指令，它主要用于在表单输入和应用状态之间创建双向数据绑定。这意味着，当用户在表单输入中修改数据时，绑定的数据会自动更新；反之，当绑定的数据变化时，输入也会相应地更新。 ### 基本原理 `v-model` 实际上是一个语法糖，它背后做了几件事情来实现双向绑定： 1. **监听 input 事件**：`v-model` 会根据控件类型自动选取正确的方法来更新元素。对于 ``, `

`，它默认使用 `value` 属性作为 prop，并监听 `input` 事件来更新数据。

2. **更新数据**：当在表单控件上触发 `input`（或其他类似事件，如 `change` 对于 `<select>`）时，`v-model` 会将新的值赋给绑定的数据属性。

3. **渲染视图**：由于 Vue 的响应式系统，当绑定的数据发生变化时，视图会自动更新以反映最新的数据。

### 自定义组件中的 v-model

在自定义组件中，`v-model` 同样可以工作，但需要组件显式地定义如何接收 prop 和触发事件。默认情况下，`v-model` 使用 `value` 作为 prop 和 `input` 作为事件，但你可以通过 `model` 选项来自定义它们：

```javascript
Vue.component('custom-input', {
  props: ['value'],
  model: {
    prop: 'customValue',
    event: 'customInput'
  },
  methods: {
    updateValue(e) {
      this.$emit('customInput', e.target.value);
    }
  },
  template: `
    <input
      :value="customValue"
      @input="updateValue"
      type="text"
    >
  `
});
```

在这个例子中，虽然模板中使用了 `:value="customValue"` 和 `@input="updateValue"`，但由于 `model` 选项的指定，使用 `<custom-input v-model="something">` 时，实际上绑定的是 `customValue` prop，并在内部 `updateValue` 方法中通过 `$emit('customInput', ...)` 触发更新。

### 注意事项

- 并非所有表单输入都触发 `input` 事件。例如，对于 `<select multiple>`，你可能需要监听 `change` 事件。
- 在自定义组件中，确保你正确处理了 prop 和事件的传递，以便 `v-model` 能够正常工作。
- Vue 3 引入了 Composition API，其中可以使用 `ref` 或 `reactive` 来创建响应式数据，并通过 `watch` 或 `computed` 来实现更复杂的逻辑，但 `v-model` 的基本工作原理保持不变。            </div>
            
          </div>

</article>
      </div>

.rec-li a{
          color: #1677ff;
        }

.pdf-title {
            padding-top: 15px;
        }
        .pdf-title svg {
            color: #f60;
            margin-top: -5px;
        }
      </style>

<div class="row">
        <div class="col-xl-12">
          <div class="">
            <div class="row">
              <h5 class="pdf-title col-md-12">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-book-half" viewBox="0 0 16 16">
                      <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
                  </svg>
                  推荐文章
              </h5>
              </div>
            <div class="">
              <ul class="custom-list">
                                <li class="rec-li">
                  <a href="/article/358.html" target="_blank">go中的接口详细介绍与代码示例</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2664.html" target="_blank">Magento专题之-Magento 2的客户体验优化：购物车与结账流程</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2991.html" target="_blank">Workman专题之-Workman 性能优化与调优技巧</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2189.html" target="_blank">PHP高级专题之-代码覆盖率和质量保证</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/5303.html" target="_blank">如何在 Magento 中实现用户的购物历史跟踪？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/4025.html" target="_blank">Hadoop的Hive的负载均衡</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/5011.html" target="_blank">如何在 Magento 中创建和管理产品的季节性销售？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/609.html" target="_blank">Python输入输出与数学运算符</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2706.html" target="_blank">Shopify专题之-Shopify的自定义域与SSL证书</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/1614.html" target="_blank">一篇文章详细介绍Magento 2 的SEO设置有哪些关键点？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2281.html" target="_blank">Python高级专题之-Mock对象和测试隔离</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/4068.html" target="_blank">Spark的全文检索与搜索引擎集成</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2798.html" target="_blank">MyBatis的RESTful服务与JSON支持</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2112.html" target="_blank">100道Go语言面试题之-Go语言的垃圾回收（GC）机制是如何工作的？它对性能有何影响？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/1595.html" target="_blank">一篇文章详细介绍Magento 2 安装过程中出现“数据库连接错误”怎么办？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2137.html" target="_blank">100道Go语言面试题之-Go语言中的切片（slice）扩容机制是怎样的？在什么情况下会发生扩容？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2000.html" target="_blank">100道python面试题之-Python中的break和continue语句是如何工作的？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2100.html" target="_blank">100道Go语言面试题之-请解释Go语言的range关键字及其用途。</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3229.html" target="_blank">Struts的控制器（Controller）工作流程</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/4390.html" target="_blank">Shopify 如何为产品页面添加限时购买的倒计时？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/5126.html" target="_blank">如何为 Magento 配置和使用自动化营销工具？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/4601.html" target="_blank">如何在 Magento 中实现用户的实时订单跟踪？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2587.html" target="_blank">MySQL专题之-MySQL存储过程与函数：编写与调试</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/4043.html" target="_blank">Spark的持续集成与持续部署（CI/CD）</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/1701.html" target="_blank">详细介绍PHP 如何解析 XML 文件？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3776.html" target="_blank">gRPC的缓存穿透、雪崩与击穿问题</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/1652.html" target="_blank">一篇文章详细介绍如何在 Magento 2 中设置邮件通知模板？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/1555.html" target="_blank">Shopify如何查看访客数据？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/1664.html" target="_blank">一篇文章详细介绍如何为 Magento 2 商店添加社交媒体登录功能（如微信登录）？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/5159.html" target="_blank">如何为 Magento 创建和管理自定义的 FAQ 页面？</a>
                </li>
                              </ul>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  
  </div>
</main>

<div class="w-100">
    <div class="part1" style="text-align: center;">
      <span>码小课网站聚焦前端、后端、大数据等领域，是国内领先的服务IT技术人员的专业性服务平台。</span>
      <span>为程序员提供多种学习形式，包含：</span>
      <span><a href="https://www.maxiaoke.com">技术小册</a>，</span>
      <span><a href="https://www.maxiaoke.com">视频课程</a>，</span>
      <span><a href="https://www.maxiaoke.com">PDF书籍</a>，</span>
      <span><a href="https://www.maxiaoke.com">技术文章</a>，</span>
      <span><a href="https://www.maxiaoke.com">面试刷题</a></span>
      <span>等多种学习资源，帮助程序员快速成长。</span>
    </div>
    <div class="part2" style="text-align: center;">
      <span>Copyright © 1998-2023 maxiaoke.com All rights reserved.　|　</span>
      <span>京ICP备15061182号-3　|</span>
      <span><a href="/help.html" class="px-2">帮助中心　|</a></span>
      <span><a href="/statement.html" class="px-2">隐私声明　|</a></span>
      <span><a href="/aboutus.html" class="px-2">关于我们</a></span>
    </div>
  </div>

</footer>