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:()=>{
}
})