开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

组件注册之后，我们就可以使用了，但是有的时候组件需要从父组件来传值，然后需要给父组件反馈值，也就是组件间的通讯。

Props

props意思是组件的参数，这里的参数主要指的vue中绑定的值，但是实际上，vue中的props的范围很宽泛，只要你给组件上加的参数都可以通过props获取，如果你是给html元素添加的属性，则叫做attrs.

那么，怎么样声明这个变量是props呢，有2种方式

• 方式1：简单声明

<child a="1" />
const props = defineProps(['a','b'])

这里只是用变量名作为props的判断依据，也就是说只要你给组件一个a属性，那么他就是子组件中的a. 但是这样有一个弊病，你无法校验传入参数的类型。如果你是一个人开发还好，如果是团队开发，你写一个公共组件，一个人传string,一个人传Boolean，然后你组件中这个值却又是number，那么你的组件估计天天被提bug.于是，vue中还有另一种声明方式，我称之为校验式声明。

• 方式1：校验式声明

<child a="1" />
const props = defineProps({
    a:{type:String,require: true,validator:(val)=>['rewards','booking'].includes(val)}
})

这种声明方式可以校验你的参数类型，是否必传，还可以校验具体的值是否合法，我建议大家声明Props都采用这种方法，这样能减少很多错误

Props的类型

在实际开发中，props的类型是一个很容易被忽视的点。比如我们使用某组件库,它有一个closeable的props，意思是是否显示关闭按钮，它的类型是boolean型，于是你很随意的写上

<a-alert closeable="false" />

然后很惊讶的发现，这个关闭按钮会一直显示。原因是：当你不用v-bind的时候，props其实是string类型，而对于string类型，只要不为空都相当于true

因此你需要这样写

<a-alert :closeable="false" />

当你使用v-bind的时，vue会读取当前组件中的变量，而不是直接传字符串。

同时绑定多个props

如果你需要给组件中绑定很多props，你肯定不想一个一个写v-bind，vue3中提供这个简便api,还能够实现动态props

const obj = {
    a:1,
    b:2
....
}
<child v-bind="obj" />