子组件封装

<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>