持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

父传子

在Vue2中，父组件想要向子组件传递数据，可以使用子组件的prop来进行，在Vue3中也同样可以如此，不同的是，在Vue2中定义组件的属性是在props对象中定义的，而在Vue3中则是使用 defineProps 函数来定义的。

这个函数不需要像ref、reactive那样要导入后才能使用，它可以直接在setup语法糖中使用，它根据是否使用了ts有两种使用的方法

未使用TS

如果未使用ts，则需要通过给 defineProps 传入一个对象做参数来进行属性的定义，而这个对象的写法与Vue2中props属性的写法一样的。

defineProps({
    title:string,
    list:number[]
})

使用了TS

如果在setup中使用了ts，那么就可以通过type来定义一种类型，然后把这种类型定义给 defineProps 函数即可。

type Props = {
    title:string,
    list:number[]
}
defineProps<Props>()

当然，即使使用了ts，也是可以通过给defineProps函数传参的方式来定义属性的。

子传父

在Vue2中，子组件可以通过自定义事件emit来向父组件传递参数，在Vue3中也是如此，不同的是，Vue3中使用的是 defineEmits 这个函数来实现。 defineEmits 接收一个数组做参数，数组中的元素就是自定义事件的名称，然后它返回的是一个函数，这个函数的第一个参数是对应自定义事件的名称，第二个参数则是要传递的参数。

// 子组件
const emit = defineEmits(['on-change','next']) // 自定义事件的名称
const handleChange = ()=>{
    emit('on-change',123) // 第一个参数是自定义事件的名称，第二个是要传递的参数
}

defineEmits 也是不需要手动导入可以直接使用的。

然后在父组件中可以这样使用

// 父组件
<div @on-change="handleSonChange">获取子组件传值</div>

上面代码的意思就是，当子组件触发了on-change事件的时候，就执行父组件中的handleSonChange方法。