1. defineProps 的使用
// 1. 基本使用
const props = defineProps(['title','isAdd','appTitle']) // 页面上直接使用接收的值 {{title}} {{isAdd}}
// 2. 添加默认值和属性
interface Props{
title:string,
settting:{
isShowSelect?:boolean,
isShowEditButton?:boolean,
isShowRemoveButton?:boolean,
isShowAddBuuton?:boolean,
}
}
const props = withDefaults(defineProps<Props>(),{
settting:()=>{
return {
isShowSelect:false,
isShowEditButton:false,
isShowRemoveButton:false,
isShowAddBuuton:true
}
}，
arr:()=>['123','234']
})
2.defineEmits 的使用
const emit = defineEmits(['addChange', 'editChangeItem'])
const addRelease = () => emit('addChange') // 子组件抛出addChange事件
3.defineExpose 的使用
// 常用场景 ==>子组件暴露属性或方法给父组件调用
// 1. 子组件(add-pople-com)暴露
const visible = ref(false)
defineExpose({
visible,
afterClose
})
// 2. 父组件通过ref获取子组件
<add-pople-com ref="addPopleDialog" />
const addPopleDialog = ref()
addPopleDialog.value.visible = true // 更改子组件visible 的状态
