父组件使用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-dialog
class="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:参数名', 改变的值)