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官方文档

相关推荐
金梦人生1 天前
Css性能优化
前端·css
Holin_浩霖1 天前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖1 天前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇1 天前
CSS属性继承与特殊值
前端·css
kevlin_coder1 天前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生1 天前
JS 性能优化
前端·javascript
peachSoda71 天前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
hbqjzx1 天前
记录一个自动学习的脚本开发过程
开发语言·javascript·学习
我有一棵树1 天前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
浪裡遊1 天前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript