当前位置：首页 > article >正文

vue3中的v-model如何自定义修饰符

article 2025/1/13 17:42:02

子组件封装

<script setup lang="ts">
import { defineModel } from "vue"

const firstName = defineModel("first-name")
// 自定义组件修饰符，首字母大写
const [lastName, lastNameModifiers] = defineModel("last-name", {
    set: (val: string) => {
        if (lastNameModifiers.captilize) {
            return val[0].toUpperCase() + val.slice(1)
        }
        return val
    }
})

</script>

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

<style scoped>

</style>

父组件

<script setup lang="ts">
import { ref } from "vue"
import type { Ref } from "vue"
import ButtonConter from "@/components/ButtonCounter.vue"

const firstName = ref("John")
const lastName = ref("Doe")

</script>

<template>
  <ButtonConter v-model:first-name="firstName" v-model:last-name.captilize="lastName" />
</template>

<style scoped>

</style>