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。