Vue中的props方式

理解

props 是 Vue 中父组件向子组件传递数据的方式
props 是子组件声明的“接收清单”，告诉父组件：“我需要这些数据，请传给我”。父组件通过属性的方式把数据传给子组件，子组件通过 props 接收后就能使用

用法：

1. 子组件声明需要接收的 props

<!-- 子组件 Child.vue -->
<template><div><!-- 使用接收的 props 数据 --><p>收到的名字：{{ name }}</p><p>收到的年龄：{{ age }}</p></div>
</template><script>
export default {// 声明需要接收的 props（简单写法）props: ['name', 'age']
}
</script>

2. 父组件传递数据给子组件

<!-- 父组件 Parent.vue -->
<template><div><!-- 通过属性传递数据，属性名要和子组件 props 声明的一致 --><Child :name="parentName"  <!-- 传递变量 -->:age="18"           <!-- 直接传递字面量 -->/></div>
</template><script>
import Child from './Child.vue'
export default {components: { Child },data() {return {parentName: '张三'  // 父组件的数据}}
}
</script>

指定 props 类型和验证

为了让数据更规范，可以指定 props 的类型、默认值、是否必传等：

<script>
export default {props: {// 名字：必须是字符串，且必填name: {type: String,required: true},// 年龄：必须是数字，默认值 18age: {type: Number,default: 18},// 爱好：必须是数组hobbies: {type: Array,// 数组/对象的默认值必须用函数返回default: () => ['读书', '运动']}}
}
</script>

注意：

• props 是单向数据流：父组件数据变化会影响子组件，但子组件不能直接修改 props（就像孩子不能直接修改父母给的东西，要改需告诉父母）。
• 如果子组件需要修改 props，应该通过 $emit 通知父组件，由父组件修改数据。

props 就是父组件给子组件送东西的通道，子组件要先声明“要什么”，父组件再“给什么”