Vue3子组件实现v-model用法的示例代码

更新时间：2024年04月25日 09:27:50 作者：方周率

在Vue 3中,实现自定义的input组件并支持v-model绑定,涉及到对modelValue这个默认prop的处理和对应的update:modelValue事件的触发,本文给大家介绍了Vue3子组件实现v-model用法的示例,需要的朋友可以参考下

前言

在Vue 3中，实现自定义的input组件并支持v-model绑定，涉及到对modelValue这个默认prop的处理和对应的update:modelValue事件的触发。Vue 3使得这个过程比Vue 2更为简化和灵活，尤其是在可以自定义绑定的属性和事件名方面。

步骤 1: 创建自定义Input组件

首先，创建一个自定义的Input组件，该组件接收一个modelValue prop，并在用户输入时触发一个update:modelValue事件。这是v-model的标准实现方式。

<!-- CustomInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="onInput"
  >
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义接受的props
const props = defineProps({
  modelValue: String
});

// 定义可能触发的事件
const emit = defineEmits(['update:modelValue']);

// 输入事件处理函数
function onInput(event) {
  // 触发事件，并传递新的值
  emit('update:modelValue', event.target.value);
}
</script>

在这个组件中，我们使用defineProps来声明组件期望接收的prop（modelValue），并用defineEmits声明组件会触发的事件（update:modelValue）。当input元素的值发生变化时（用户输入时），我们触发update:modelValue事件，将新的输入值作为事件的参数传递出去。

步骤 2: 在父组件中使用自定义Input组件

然后，在父组件中使用这个自定义Input组件，并通过v-model进行数据绑定。

<!-- ParentComponent.vue -->
<template>
  <div>
    <CustomInput v-model="textInput" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';

const textInput = ref('');
</script>

在这个父组件中，textInput是一个响应式引用，存储用户在自定义输入框中输入的数据。通过v-model指令，Vue 自动处理modelValue prop的传入和update:modelValue事件的监听。

自定义model参数

如果你需要自定义v-model绑定的属性名和事件名（例如，如果你希望属性名不是modelValue，或者你希望事件名不是update:modelValue），你可以在组件上指定v-model的参数。

自定义属性和事件名的CustomInput组件：

<!-- CustomInput.vue -->
<template>
  <input
    :value="customValue"
    @input="onInput"
  >
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  customValue: String
});
const emit = defineEmits(['customUpdate']);

function onInput(event) {
  emit('customUpdate', event.target.value);
}
</script>

在父组件中使用：

<!-- ParentComponent.vue -->
<template>
  <div>
    <CustomInput v-model:customValue="textInput" />
  </div>
</template>

在这种情况下，:customValue告诉Vue使用customValue作为prop并监听customUpdate事件来更新textInput。

通过这种方式，你可以在Vue 3中灵活地实现自定义的input组件，允许通过标准或自定义的方式使用v-model进行数据双向绑定。这大大增加了组件的通用性和可重用性。

以上就是Vue3子组件实现v-model用法的示例代码的详细内容，更多关于Vue3子组件实现v-model的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解Vue中的Props与Data细微差别
这篇文章主要介绍了详解Vue中的Props与Data细微差别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
vue3+ts+vite使用el-table表格渲染记录重复情况
这篇文章主要给大家介绍了关于vue3+ts+vite使用el-table表格渲染记录重复情况的相关资料,我们可以通过合并渲染、数据缓存或虚拟化等技术来减少重复渲染的次数,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
VUE2实现事件驱动弹窗示例
本篇文章主要介绍了VUE2实现事件驱动弹窗示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
vue 粒子特效的示例代码
本篇文章主要介绍了vue 粒子特效的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue页面中播放音频文件的方法详解
这篇文章主要为大家详细介绍了Vue实现页面中播放音频文件的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2025-02-02
vue实现滚动条始终悬浮在页面最下方
这篇文章主要为大家详细介绍了vue实现滚动条始终悬浮在页面最下方，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue组件系列之TagsInput详解
TagsInput 是一种可编辑的输入框，通过回车或者分号来分割每个标签，用回退键删除上一个标签。这篇文章主要介绍了vue组件TagsInput的相关知识,需要的朋友可以参考下
2020-05-05
Element布局组件el-row和el-col的使用
这篇文章主要介绍了Element布局组件el-row和el-col的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
Vuex中的getter和mutation的区别详解
在现代前端开发中,状态管理是一个不可忽视的话题,而Vuex作为Vue.js的官方状态管理库,在大型应用中扮演着至关重要的角色,当我们使用Vuex进行状态管理时,getter和mutation是两个重要的概念,在本文中,我们将详细探讨getter和mutation的区别,需要的朋友可以参考下
2024-12-12
vue v-model的详细讲解(推荐!)
vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别,下面这篇文章主要给大家介绍了关于vue v-model的相关资料,需要的朋友可以参考下
2022-04-04