defineProps和defineEmits的使用场景‌

• ‌父组件向子组件传递数据‌：子组件可以通过defineProps接收来自父组件的数据，并在子组件的模板中使用这些数据。‌2
• ‌子组件向父组件发送事件‌：子组件可以通过defineEmits触发事件，并将数据发送回父组件，父组件可以监听这些事件并作出响应。‌

defineExpose

defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数，用于在<script setup>语法下显式暴露组件的公共属性和方法，这在处理子组件时特别有用，允许父组件访问子组件的特定属性或方法。在 Vue 3 中，当我们使用defineExpose

父组件：

javascript"><com-dialog ref="drawerCreateModel" :title="createShow.title" :drawerType="createShow.drawerType" :data="createShow.data" @dialogVisible="closeCreat"/>
//引入子组件
import comDialog from './page/comDialog.vue'
//定义ref变量
const drawerCreateModel = ref()
//定义需要传给子组件的变量
const createShow = reactive({visible: false,data: {},title: '',drawerType: '',
})//通过ref调用子组件的cancel（）方法
const closeModelCreat = () => {drawerCreateModel.value.cancel()
}
//当子组件的visible更改时，该方法被触发
const closeCreat = (newValue) => {createShow.visible = newValue
}

子组件：

javascript">//接收来自父组件的参数
const props = defineProps({data: {type: Object || Array,default: () => {return {}}},title: {type: String,default: ''},drawerType: {type: String,default: ''},
})
//定义父组件用@dialogVisible传过来的dialogVisible变量
const $emit = defineEmits(['dialogVisible'])
const cancel = () => {//通过$emit更新visible，从而触发父组件的closeCreat（）方法$emit('dialogVisible', false)
}
//向父组件暴露cancel（）方法
defineExpose({cancel
})