Vue.js 的 v-model 指令在自定义组件中如何接收多个输入值？

当前位置：技术文章>> Vue.js 的 v-model 指令在自定义组件中如何接收多个输入值？

文章标题：Vue.js 的 v-model 指令在自定义组件中如何接收多个输入值？

文章分类: 后端
9993 阅读

在 Vue.js 中，`v-model` 默认在组件上实现的是双向数据绑定，通常用于处理表单输入（如 ``、`

` 等）或自定义组件的单一数据绑定。但是，如果你想要在一个自定义组件上通过 `v-model` 接收多个输入值，Vue.js 本身并不直接支持这种用法，因为标准的 `v-model` 绑定到组件的 `value` 属性和 `input` 事件上。

不过，你可以通过一些方法来实现类似的效果：

### 方法一：使用自定义事件和 props

你可以通过自定义 props 来接收多个输入值，并通过自定义事件来更新父组件中的状态。这种方法不直接使用 `v-model`，但可以达到类似的效果。

```vue

<template>
  <div>
    <input v-model="localValue1" @input="update:value1" />
    <input v-model="localValue2" @input="update:value2" />
  </div>
</template>

<template>
  <ChildComponent
    :value1="value1"
    :value2="value2"
    @update:value1="value1 = $event"
    @update:value2="value2 = $event"
  />
</template>

export default {
  components: { ChildComponent },
  data() {
    return {
      value1: '',
      value2: '',
    };
  },
};
</script>
```

### 方法二：使用 `.sync` 修饰符（Vue 2.3.0+）

在 Vue 2.3.0+ 中，`.sync` 修饰符可以用于简化上述方法中的事件监听和更新操作。然而，它本质上仍然是基于自定义事件和 props 的，且主要用于单一 prop 的双向绑定。对于多个 prop 的情况，你可能需要为每个 prop 分别使用 `.sync`。

### 方法三：使用 v-model 的数组或对象

另一种思路是，将多个输入值封装在一个对象或数组中，然后在父组件和子组件之间通过这个对象或数组进行双向绑定。这样，虽然你仍然是在使用 `v-model`，但它绑定的是一个复杂的数据结构，而不是单个值。

```vue

<template>
  <div>
    <input v-model="localValues.first" @input="updateValues" />
    <input v-model="localValues.second" @input="updateValues" />
  </div>
</template>

<template>
  <ChildComponent v-model="values" />
</template>

export default {
  components: { ChildComponent },
  data() {
    return {
      values: { first: '', second: '' },
    };
  },
};
</script>
```

这种方法通过 `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/1055.html" target="_blank">在Magento 2的购物车页面上的网格顶部添加额外的“继续结帐”按钮的步骤：</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3453.html" target="_blank">JPA的API文档生成与维护</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2461.html" target="_blank">Javascript专题之-JavaScript与前端性能分析：性能瓶颈定位</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2008.html" target="_blank">100道python面试题之-解释一下Python中的__init__方法的作用。</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/881.html" target="_blank">如何利用ChatGPT为企业带来更智能化的客户服务</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/1708.html" target="_blank">详细介绍PHP 如何实现国际化（i18n）？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3135.html" target="_blank">Spring Security专题之-Session管理：会话固定攻击与防护</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3306.html" target="_blank">Yii框架专题之-Yii的缓存管理：PageCache与FragmentCache</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3483.html" target="_blank">Kafka的副本（Replication）与故障转移</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2088.html" target="_blank">100道Go语言面试题之-请解释Go语言的并发模型（Goroutines和Channels）与传统线程模型的区别。</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3169.html" target="_blank">Spring Security专题之-Spring Security的动态权限控制与策略</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/896.html" target="_blank">ChatGPT的普及是否对传统的程序员职业带来挑战？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3119.html" target="_blank">Spring Cloud专题之-微服务中的性能监控与调优</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/837.html" target="_blank">magento2中的ThumbnailColumn 组件以及代码示例</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/1628.html" target="_blank">一篇文章详细介绍Magento 2 如何处理客户退货和换货？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/1430.html" target="_blank">如何在Shopify中调试Liquid模板？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2016.html" target="_blank">100道python面试题之-请解释Python中的上下文管理器（Context Manager）。</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/1606.html" target="_blank">一篇文章详细介绍如何在 Magento 2 后台添加和编辑商品？</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/60.html" target="_blank">javascript理解原型和原型链的关系与运用</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3020.html" target="_blank">Workman专题之-Workman 的代码审查与质量保证</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2708.html" target="_blank">Shopify专题之-Shopify的API错误代码与处理</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/1025.html" target="_blank">在Magento 2中使用JavaScript设置价格格式的步骤：</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3275.html" target="_blank">Struts的全文检索与搜索引擎集成</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3216.html" target="_blank">Hibernate的代码审查与质量保证</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/725.html" target="_blank">magento2中的jQuery 小部件编码标准以及代码示例</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/2372.html" target="_blank">Go语言高级专题之-Go语言中的国际化与本地化支持</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3022.html" target="_blank">Workman专题之-Workman 的文档编写与社区贡献</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/28.html" target="_blank">javascript中的noscript元素的用法</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/3059.html" target="_blank">Spring Boot的链路追踪与日志分析</a>
                </li>
                                <li class="rec-li">
                  <a href="/article/503.html" target="_blank">详细介绍nodejs中的path模块</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>