vue3自定义多个v-model以及自定义修饰符

从 Vue 3.4 开始,推荐的实现方式是使用 defineModel() 宏:

废话不多说,直接上代码

javascript 复制代码
<!-- Son.vue -->
<script setup>
const model = defineModel()
</script>

<template>
  <span>My input</span> <input v-model="model">
</template>

<!-- Parent.vue -->
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <Child v-model="msg" />
</template>

多个v-model

javascript 复制代码
<!-- Parent.vue -->
<UserName
  v-model:first-name1="first"
  v-model:last-name1="last"
/>
<!-- Son.vue -->
<script setup>
const firstName = defineModel('firstName1')  //这里的参数就是父组件v-model后面的值
const lastName = defineModel('lastName1')
</script>

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>

处理 自定义v-model 修饰符

javascript 复制代码
<!-- Parent.vue -->
<MyComponent v-model.capitalize="myText" />

<!-- Son.vue -->
<script setup>
const [model, modifiers] = defineModel({
  set(value) {
    if (modifiers.capitalize) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
    return value
  }
})
</script>

<template>
  <input type="text" v-model="model" />
</template>

vue3官方文档

相关推荐
国家不保护废物19 小时前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js
写不来代码的草莓熊19 小时前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
JinSo20 小时前
pnpm monorepo 联调:告别 --global 参数
前端·github·代码规范
程序员码歌20 小时前
豆包Seedream4.0深度体验:p图美化与文生图创作
android·前端·后端
urhero20 小时前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序
二十雨辰20 小时前
eduAi-智能体创意平台
前端·vue.js
golang学习记20 小时前
从0死磕全栈之Next.js connection() 函数详解:强制动态渲染的正确姿势(附实战案例)
前端
郝学胜-神的一滴20 小时前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
m0dw20 小时前
vue懒加载
前端·javascript·vue.js·typescript
国家不保护废物20 小时前
手写 Vue Router,揭秘路由背后的魔法!🔮
前端·vue.js