<template><div><h1>我是App.vue组件</h1><div>isShpw:{{ isShow }}</div><div>text:{{ text }}</div><div><button @click="isShow = !isShow">开关</button></div><hr /><vModeValue v-model:textVal.isBt="text" v-model="isShow"></vModeValue></div>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import vModeValue from "./components/v-model.vue";
const isShow = ref<boolean>(true);
const text = ref<string>("小满");
</script><style scoped></style>

v-model.vue:

<template><div class="model" v-if="modelValue"><div class="close"><button @click="close">关闭</button></div><h3>我是v-model子组件 dialog</h3><div>内容：<input @input="change" type="text" :value="textVal" /></div></div>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
const props = defineProps<{modelValue: boolean;textVal: string;textValModifiers?: {isBt: boolean;};
}>();
const emit = defineEmits(["update:modelValue", "update:textVal"]);const close = () => {emit("update:modelValue", false);
};
const change = (e: Event) => {const target = e.target as HTMLInputElement;emit("update:textVal",props?.textValModifiers?.isBt ? target.value + "变态" : target.value);
};
</script><style>
.model {width: 500px;border: 5px solid #ccc;padding: 10px;
}
.close {display: flex;justify-content: flex-end;
}
</style>