父组件使用v-model传值给子组件

<template><!-- 按钮 -->
<el-button @click="addMenu('new')">打开弹框</el-button><!-- 自定义组件,下面这两种写法都可以👇 -->
<MediaDialog :name="name" v-model:visible="dialogMediaVisible" /></template><script lang="ts">
import { defineComponent, ref } from 'vue'export default defineComponent({name: 'MediaCenter',setup() {const dialogMediaVisible: Ref = ref(false)const name = '🚌🚌🚌🚌🚌🚌🚌🚌🚌父组件传递的name🚌🚌🚌🚌🚌🚌🚌🚌🚌'const addMenu = function(status) {dialogMediaVisible.value = true}return {name,dialogMediaVisible,}}
})
</script>

子组件

子组件使用 props 接收父组件传来的值

<template><div><!--⚠️注意这里有个大坑，一定要用 model-value，不能用v-model --><el-dialogclass="mediaDialog"title="我是一个弹框":model-value="visible":before-close="handleClose"><span>{{ name }}</span><template #footer><span class="dialog-footer"><el-button @click="handleClose">取 消</el-button><el-button type="primary" @click="handleClose">确 定</el-button></span></template></el-dialog></div>
</template><script lang="ts">
import { defineComponent, ref, provide } from 'vue'export default defineComponent({name: 'mediaDialog',props: {name: String,visible: Boolean},setup(props, context) {// 使用 context.emit('update:visible', false)，改变父组件visible的值const handleClose = function() {context.emit('update:visible', false)}return { handleClose }}
})
</script>

注意

1）这里有个大坑，<el-dialog> 中一定要用 model-value 来代替 v-model，不能用v-model，否则会报错
（2）子组件中修改父组件传入的参数 visible 时，使用 👇方式

context.emit('update:参数名', 改变的值)