子组件：
<template>
<div v-if="propData.modelValue" class="dialog">
<div class="dialog-header">
<div>标题-{{ title }}</div>
<div class="close" @click="close">X</div>
</div>
<div class="dialog-content">内容</div>
<el-button @click="changeTitle">修改标题</el-button>
</div>
</template>
<script setup lang="ts">
type Props = {
modelValue: boolean
title?: string
modelModifiers?: {
chunshu: boolean
}
titleModifiers?: {
aaa: boolean
}
}
const propData = defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'update:title'])
const close = () => {
emit('update:modelValue', false)
}
const changeTitle = () => {
emit('update:title', '修改了标题')
if (propData.modelModifiers?.chunshu) {
console.log('带chunshu了')
} else {
console.log('没带chunshu了')
}
if (propData.titleModifiers?.aaa) {
console.log('带aaa了')
} else {
console.log('没带aaa了')
}
}
</script>
<style lang="less" scoped>
.dialog {
width: 300px;
height: 300px;
border: 1px solid #ccc;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
&-header {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
padding: 10px;
.close {
cursor: pointer;
}
}
&-content {
padding: 10px;
}
}
</style>父组件：
<template>
<el-button @click="show = !show">开关</el-button>
<Dialog v-model:title.aaa="title" v-model.chunshu="show"></Dialog>
</template>
<script setup lang="ts">
import Dialog from './components/Vmodel.vue'
import { ref } from 'vue'
const show = ref(true)
const title = ref('我是一个标题')
</script>
<style scoped></style>
