vue3 父子组件传参

一.子组件中接收

1.js写法

const props = defineProps({
    name: {
        default: "张三",
        type: String
    }
})

console.log(props.name)

2.ts写法

const props = defineProps<{
    name: string,
    arr: number[]
}>()

二.子组件给父组件传值

defineEmits

const emit = defineEmits(['click'])

const send = () =>{
    emit('click','你好')
}

三.给父组件暴漏方法或者属性

子组件

// 给父组件暴漏的方法
defineExpose({
  name: "父组件可以取到的name",
  opt: () => {
    console.log("父组件调用了这个方法");
  },
});

父组件 

 <TestProps ref="test" @click="onSend" title="不不不不不不"></TestProps>

// ref
const test = ref<InstanceType<typeof TestProps>>();
test.value?.name
test.value?.opt()