vue3 setup语法糖的使用

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(),{
    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获取子组件

const addPopleDialog = ref()
addPopleDialog.value.visible = true  // 更改子组件visible 的状态