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的标准实现方式。

html 复制代码
<!-- 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进行数据绑定。

html 复制代码
<!-- 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组件

html 复制代码
<!-- 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>

在父组件中使用

html 复制代码
<!-- ParentComponent.vue -->
<template>
  <div>
    <CustomInput v-model:customValue="textInput" />
  </div>
</template>

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

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

相关推荐
中微子2 分钟前
React状态管理最佳实践
前端
烛阴12 分钟前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子19 分钟前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...28 分钟前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情29 分钟前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz33 分钟前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w90892585943 分钟前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
天天扭码1 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw51 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !1 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app