前言
开发期间各个组件之间必定要互相交互传值，之前学习路由的时候介绍了几种传值方式，今天再详细的研究一下各个组件之间但不限于路由的传值Props。
一、props 选项式写法
props 需要使用 props 选项来定义：
export default {
props: ['foo'],
created() {
// props 会暴露到 `this` 上
console.log(this.foo)
}
}
除了使用字符串数组来声明 prop 外，还可以使用对象的形式：
export default {
props: {
title: String,
likes: Number
}
}
二、props 组合式写法
<script setup>
const props = defineProps(['foo'])
console.log(props.foo)
</script>
export default {
props: ['foo'],
setup(props) {
// setup() 接收 props 作为第一个参数
console.log(props.foo)
}
}
注意传递给 defineProps() 的参数和提供给 props 选项的值是相同的，两种声明方式背后其实使用的都是 prop 选项。
除了使用字符串数组来声明 prop 外，还可以使用对象的形式：
// 使用 <script setup>
defineProps({
title: String,
likes: Number
})
// 非 <script setup>
export default {
props: {
title: String,
likes: Number
}
}
如果你正在搭配 TypeScript 使用
<script setup lang="ts">
defineProps<{
title?: string
likes?: number
}>()
</script>
这种方式可以传递自定义类型。、，注意属性后面的问号代表可以传可以不传。
如我想接收菜单对象：
interface NavigationItem{
children: Array<Object>,
id:string,
name:string,
path:string
}
const {navigationItem} = defineProps<{
navigationItem :NavigationItem,
hidden:boolean
}>()
声明了属性之后就可以接收其他组件传递的值了：
<MyComponent title="hello" likes=10 />
<span>{{ title}}</span>
<span>{{ likes}}</span>
总结
简简单单入门的语法就介绍到这，明天再深入一下。
生活本来很不易，不必事事渴求别人的理解和认同，静静的过自己的生活。心若不动，风又奈何。你若不伤，岁月无恙。
