vue3 父子组件传值

父传子 使用props 子传父使用emit方法

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
/*
 * 父传子 子接收值为：props.foo
 * 子传父 方法 emit('change',delete)  emit(e:'change',res:'delete')
 **/
 
</script>

TS类型定义

第一种将类型定义在defineProps内

const props = defineProps<{
    name:string,
    age:number
>()

第二种将类型定义在defineProps外

interface propsType{
    name:string,
    age:number
}
const props = defineProps<propsType>()

子传父

const emit = defineEmits<{ 
(e: 'change', id: number): void 
(e: 'update', name: string): void }>()
这是具名元组语法
const emit = defineEmits<{ 
    change: [id: number] 
    update: [value: string] 
}>()