Vue3中的常见组件通信之v-model使用详解

更新时间：2025年04月08日 17:11:55 作者：m0_63165331

这篇文章主要介绍了Vue3中的常见组件通信之v-model使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue3中的常见组件通信之v-model

概述

在vue3中常见的组件通信有props、mitt、v-model、refs、parent、provide、inject、pinia、slot等。不同的组件关系用不同的传递方式。

常见的撘配形式如下表所示。

组件关系	传递方式
父传子	1. props 2. v-model 3. $refs 4. 默认插槽、具名插槽
子传父	1. props 2. 自定义事件 3. v-model 4. $parent 5. 作用域插槽
祖传孙、孙传祖	1. $attrs 2. provide、inject
兄弟间、任意组件间	1. mitt 2. pinia

props和自定义事件详见本人另一篇文章：

Vue3中的常见组件通信之props和自定义事件

mitt用法详见本人另一篇文章：

Vue3中的常见组件通信之mitt

下面接着前面的文章继续记录v-model的用法。

v-model

v-model常用于普通html标签中的双向绑定，这个绑定用法无法实现跨组件通信，v-model用在组件标签中的时候，可以实现父子间的组件通信，而这样通信方式常用于UI组件库。

要理解UI组件库的v-model的双向通信原理，需要先明白普通html标签中的v-model的底层原理。

普通HTML标签中v-model实现双向绑定的底层原理

在普通html标签中用v-model可以实现数据的双向绑定，如下代码所示是把input输入框里的数据与username进行双向绑定：

<template>
  <div class="father">
    <h3>父组件</h3>    
    <br>
    <input id="input1" type="text" v-model="username">
  </div>
</template>

<script setup lang="ts" name="Father">
	import { ref } from "vue"; 
  // 数据
  let username = ref('zhansan')

</script>

<style scoped>
.father {
  height: 300px;
  padding: 20px;
  color: #ffffff;  
  text-align:center; 
  background-image: url(https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406041301030.png);
  background-size: cover
}
#input1{
  color: #000;
}
</style>

运行后在浏览器打开vue开发者工具，如下图所示：

上图中更改vue开发者工具中的username的值页面也会跟着发生变化，这个实现的是把数据呈现在页面，如果修改input输入框中的内容，username的数据也会跟着发生改变，这个实现的是页面传向数据，这就双向绑定中的双向，而实现这个双向绑定的关键就是在于input标签中写了v-model，如下所示：

<input id="input1" type="text" v-model="username">

而上面的代码实现的底层原理是这样的，先把上面的代码改成如下图所示：

<input id="input1" type="text" :value="username">

这样可以实现数据呈现在页面，数据修改页面也会跟着修改，但是修改页面，数据却不会变化，这只实现了一个方向的数据绑定，接着再给input标签增加属性,如下代码：

<input 
       id="input1" 
       type="text" 
       :value="username" 
       @input="username=$event.target.value"
       >

这样再测试，就会发现页面中的数据也可以传向数据了，修改input标签中的内容，数据也会变化。

注意上面代码中@input="@input="username=event.target.value"这句代码 ts 会报警，我们需要处理一下，对event.target进行断言，报警就会消失：

<input 
      id="input1" 
      type="text" 
      :value="username" 
      @input="username=(<HTMLInputElement>$event.target).value"
      >

普通input标签中v-model实现双向绑定的底层原理就是:value+@input事件。

组件标签中v-model中实现双向绑定

首先准备一个自己的UI组件，作为子组件，代码如下：

<template>
    <input type="text">
</template>

<script setup lang="ts" name="MyInput">

</script>

<style scoped>
    input{
        background-color:transparent;
        color: #ffffff;
        border: 0px;
        border-bottom: 1px solid #ffffff ;
        margin: 5px;
    }
</style>

然后在父组件中引入：

//引入MyInput组件
  import MyInput from "./MyInput.vue";

在父组件中把MyInput组件呈现在页面中：

<label>用户名：<MyInput/></label>

运行效果如下：

这样效果出来了，但是没有还没有实现数据绑定，首先在MyInput组件标签上增加:modelValue属性和绑定@update:model-value事件，如下代码：

<MyInput :modelValue="username" @update:model-value="username=$event"/>

然后需要在MyInput组件中声明props和声明事件来接收数据和事件：

//接收props
defineProps(["modelValue"])
//声明事件
let emit = defineEmits(['update:model-value'])

最后在MyInput组件中的普通html标签中添加:value属性和绑定@input事件：

<input 
       type="text" 
       :value="modelValue"
       @input="emit('update:model-value',(<HTMLInputElement>$event.target).value)"
>

至此，已经实现了父组件和子组件MyInput组件的双向通信,如下图所示：

最后在父组件中的MyInput组件标签上可以直接简写为如下代码：

<MyInput v-model="username"/>

实现的效果是完全一样的。

我们在用UI组件库的时候可以直接这样写，前提是UI组件库已经处理好了底层逻辑。

以下是完整代码：

父组件：

<template>
  <div class="father">
    <h3>父组件</h3>    
    <br>
    <!-- <input id="input1" type="text" v-model="username"> -->

    <!-- 下面是v-model 的本质 -->
    <!-- <input 
      id="input1" 
      type="text" 
      :value="username" 
      @input="username=(<HTMLInputElement>$event.target).value"
      > -->
    
    <!-- 下面是v-model 的本质 -->
    <!-- <label>用户名：<MyInput :modelValue="username" @update:model-value="username=$event"/></label> -->

    <label>用户名：<MyInput v-model="username"/></label>

  </div>
</template>

<script setup lang="ts" name="Father">
	import { ref } from "vue"; 
  //引入MyInput组件
  import MyInput from "./MyInput.vue";
  // 数据
  let username = ref('zhansan')

</script>

<style scoped>
.father {
  height: 300px;
  padding: 20px;
  color: #ffffff;  
  text-align:center; 
  background-image: url(https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406041301030.png);
  background-size: cover
}
#input1{
  color: #000;
}
</style>

MyInput组件：

<template>
    <input 
        type="text" 
        :value="modelValue"
        @input="emit('update:model-value',(<HTMLInputElement>$event.target).value)"
    >
</template>

<script setup lang="ts" name="MyInput">
    //声明props
    defineProps(["modelValue"])
    //声明事件
    let emit = defineEmits(['update:model-value'])
</script>

<style scoped>
    input{
        background-color:transparent;
        color: #ffffff;
        border: 0px;
        border-bottom: 1px solid #ffffff ;
        margin: 5px;
    }
</style>

一个UI组件实现多个数据传送

在父组件中可以改value，比如改成usName，如下代码所示：

<MyInput v-model:usName="username"/>

这个代码的本质是如下代码：

<MyInput :usName="username" @update:usName="username=$event"/>

在MyInput组件代码中就需要改成如下代码：

<template>
    <input 
        type="text" 
        :value="usName"
        @input="emit('update:usName',(<HTMLInputElement>$event.target).value)"
    >
</template>

<script setup lang="ts" name="MyInput">
    //声明props
    defineProps(["usName"])
    //声明事件
    let emit = defineEmits(['update:usName'])
</script>

这样改完后运行效果跟之前是完全一样的，接下来再扩展一下，父组件中的MyInput标签改成如下代码：

<MyInput v-model:usName="username" v-model:paword="password"/>

然后在MyInput组件中代码改成如下：

<template>
    <input 
        type="text" 
        :value="usName"
        @input="emit('update:usName',(<HTMLInputElement>$event.target).value)"
    >
    <br>
    <input 
        type="text" 
        :value="paword"
        @input="emit('update:paword',(<HTMLInputElement>$event.target).value)"
    >
</template>

<script setup lang="ts" name="MyInput">
    //声明props
    defineProps(["usName",'paword'])
    //声明事件
    let emit = defineEmits(['update:usName','update:paword'])
</script>

这样就实现一个组件内双向绑定两个数据了，如下图所示：

总结

v-model可以实现父子间的通信，v-model即可以设置在普通html标签中，也可以设置在组件标签中，设置在组件标签中可以实现父子间的双向通信，前提是子组件底层做了处理。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue前端自适应布局实现教程(一步到位所有自适应)
自适应布局是一种根据不同的设备屏幕分辨率进行布局的方式,它为不同的屏幕分辨率定义了不同的布局,下面这篇文章主要给大家介绍了关于vue前端自适应布局实现的相关资料,需要的朋友可以参考下
2024-08-08
VUE兄弟组件传值操作实例分析
这篇文章主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下
2019-10-10
解决vue keep-alive 数据更新的问题
今天小编就为大家分享一篇解决vue keep-alive 数据更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
前端vue3中的ref与reactive用法及区别总结
这篇文章主要给大家介绍了关于前端vue3中的ref与reactive用法及区别的相关资料,关于ref及reactive的用法,还是要在开发中多多使用,遇到响应式失效问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-08-08
Vue通过Blob对象实现导出Excel功能示例代码
这篇文章主要介绍了Vue通过Blob对象实现导出Excel功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-07-07
Vuex mutitons和actions初使用详解
这篇文章主要介绍了Vuex mutitons和actions初使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
Vue.use()的用法和install的用法解析
这篇文章主要介绍了Vue.use()的用法和install的用法解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue 中v-model的完整用法及v-model的实现原理解析
这篇文章详细介绍了Vue.js中的v-model指令的使用,包括基本用法、原理、结合不同类型的表单元素（如radio、checkbox、select）以及使用修饰符（如lazy、number、trim）等,感兴趣的朋友一起看看吧
2025-02-02
ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefin
这篇文章主要介绍了ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefined解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
详解vue如何使用rules对表单字段进行校验
这篇文章主要介绍了详解vue如何使用rules对表单字段进行校验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10