Vue3中props
在 Vue 3 中，props 的使用方式相比 Vue 2 有一些变化，特别是在 <script setup> 语法下的使用。下面是一些关于 Vue 3 中的 props 的基本用法和一些注意事项：
1. <script setup> 语法：
在 Vue 3 中引入了 <script setup> 语法糖，使得编写组件更加简洁。在 <script setup> 中，props 的使用方式有所改变。
<script setup> import { defineProps } from 'vue'; const props = defineProps(['prop1', 'prop2']); </script> <template> <div> {{ props.prop1 }} {{ props.prop2 }} </div> </template>
在这个例子中，使用 defineProps 来声明组件的 props，props 变量会自动解构为响应式对象。在模板中，直接使用 props 访问属性。
2. 按需引入：
如果你只需要部分 props，你可以通过传入一个数组或对象来按需引入。
<script setup> import { defineProps } from 'vue'; const { prop1, prop2 } = defineProps(['prop1', 'prop2']); </script> <template> <div> {{ prop1 }} {{ prop2 }} </div> </template>
或者：
<script setup> import { defineProps } from 'vue'; const { prop1, prop2 } = defineProps({ prop1: String, prop2: Number, }); </script> <template> <div> {{ prop1 }} {{ prop2 }} </div> </template>
3. 类型验证：
你可以通过传递一个包含类型的对象来进行类型验证。
<script setup> import { defineProps } from 'vue'; const props = defineProps({ prop1: String, prop2: { type: Number, default: 42, }, }); </script> <template> <div> {{ props.prop1 }} {{ props.prop2 }} </div> </template>
4. 默认值：
你可以通过 default 选项为 props 设置默认值。
<script setup> import { defineProps } from 'vue'; const props = defineProps({ prop1: String, prop2: { type: Number, default: 42, }, }); </script> <template> <div> {{ props.prop1 }} {{ props.prop2 }} </div> </template>
5. 在 setup 中使用：
如果你选择不使用 <script setup> 语法，而是手动编写 setup 函数，props 的使用方式会有所不同。在这种情况下，你需要从 context 中解构 props。
<script> export default { props: { prop1: String, prop2: Number, }, setup(props) { // 在 setup 函数中使用 props console.log(props.prop1); console.log(props.prop2); return { // 返回供模板使用的数据 }; }, }; </script> <template> <!-- 模板内容 --> </template>
单向数据流
props数据流是单向的，即自上而下的单向数据流。这意味着数据从父组件传递到子组件，但子组件不能直接修改父组件的数据。这种单向数据流的设计有助于代码的可维护性和可预测性。
单向数据流的特点：
- 父子组件关系： 数据流主要体现在父子组件之间。父组件通过
props将数据传递给子组件。 - Props： 子组件通过
props接收父组件传递的数据。props是一种传递数据的方式，子组件不能直接修改props中的值。 - 事件： 子组件可以通过触发事件来通知父组件发生了某些事情。父组件通过监听子组件的事件来获知子组件的状态变化。
- **：子组件可以使用emit` 方法触发自定义事件，父组件可以通过监听这些事件来获取子组件的状态。
- Provide/Inject： Vue 提供了
provide和inject来实现祖先组件向后代组件传递数据的能力，但要谨慎使用，因为这会形成依赖关系。
注意
- 在
<script setup>中，defineProps宏的参数只能包含props对象的键，且这些键必须与组件的props名称相匹配。直接在defineProps宏的参数中使用其他变量是不允许的。
<script setup> const customVariable = 'Hello'; // 错误的用法 // const props = defineProps([customVariable]); </script> <template> <div> {{ customVariable }} </div> </template>
上面的代码会导致错误，因为 defineProps 宏的参数应该是与组件的 props 名称一致的字符串数组。
- 所以prop默认都是可选的，除非定义了required:true，除了boolean类型的prop，没穿默认是undefined，boolean类型的prop没传默认会是false。
