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 就是父组件给子组件送东西的通道，子组件要先声明“要什么”，父组件再“给什么”