五、父子组件

发布时间 2023-04-20 16:01:20作者: 前端混子Ray
1、defineProps 父传子
defineProps({
        参数名:{
            type: 参数类型,
            default:'默认值'
        }
    })
    const prpos = defineProps({
        参数名:{
            type: 参数类型,
            default:'默认值'
        }
    })
2、ts defineProps 父传子
withDefaults( defineProps<{
            参数名: 参数类型,
            参数名:参数类型
        }>(),{
            参数名:'默认值'
            arr:()=>['aaa']
       })
3、 子传父
<button @click="send"></button>
   const emit = defineEmits(['on-click','on-click'])//可多个
   const send = () => {
    emit('on-click','参数')
   }
4、 ts 子传父
 <button @click="send"></button>
   const emit = defineEmits<{
    (e:'on-click','参数':参数类型):返回类型  //可多个
    (e:'on-click','参数':参数类型):返回类型  //可多个
   }>
   const send = () => {
    emit('on-click','参数')
   }
5、 子组件暴露方法或属性,父组件调用
// 父组件 <子组件 ref="方法名称" @click="send"></子组件>
    const 方法名称 = ref<InstanceType<typeof 子组件>>()
    方法名称.value?.name
    方法名称.value.open
   // 子组件
   defineExpose({
    name:'aaa'
    open:()=>{

    }
   })