前言
以下代码和内容的使用都是在setup中,未使用TS。
<script setup>
</script>
VUE3组件 (4) 关于 Provide Inject 依赖注入
使用defineProps
在 单文件组件中,向组件传递数据,下面以 blog(父组件)和article(子组件)为例。
1.例子
在blog.vue中,先引入article。
// Blog.vue
<template>
<Aritice :title="AriticeItem.title" :info="AriticeItem.info" :author="AriticeItem.author">
<!-- v-bind ( : ) ,父组件将值绑定到子组件上 -->
</Aritice>
</template>
<script setup>
import { reactive } from 'vue';
import Article from '@/components/Article.vue';
const AriticeItem = reactive({
title: '文章标题',
info: '文章内容',
author: 'X',
});
</script>
//Article.vue
<template>
<section>
<p>{{ title }}</p>
<p>{{ info }}</p>
<p>{{ author }}</p>
</section>
</template>
<script setup>
const props = defineProps({
title: String,
info: String,
author: String,
});// 对象形式声明 props
// 等价于以 字符串数组声明 props
//const props = defineProps(['title', 'info', 'author']);
// 如果在setup中使用则直接 props.title
</script>
<style></style>
2.说明
- 对象形式声明:key 是对应的名称。value在上面的示例中是prop中对应的类型。value的具体格也可以是一个对象,常用的属性如下
{
type:String ,// 如果可能存在多个类型,则可以写成 [String,Number]
default:'默认值',
required: true// 是否必传 ,在不声明为true 的情况下,所有prop 默认为非必填。
}
// 上面的title 字段展开则为
title:{
type:String
}
- 字符串数组声明:数组的每一项字面量就为prop对应的名称。
3 使用
在template 模版中,直接使用 defineProps() 声明过后的名称。
在setup中(以1.例子中的代码为例),只需要直接 props.title 就可以获取到title 对应的值。
props一般是单向的,在子组件中不应该对 props 进行修改。如果需要在子组件中对props进行处理,应当使用ref(初始值为props的值):
const formatTitle = ref(props.title)
//这样,子组件中后续对 formatTitle 的修改,就与原props.title 无关联了
如果子组件中对数据更新,确实需要修改原数据,那么应当通知父组件或者props传入的地方,对数据进行调整(涉及到组件的事件)
补充
在上述例子中,props是一个对象,并且每个属性都要传递到子组件中,可以使用不指定参数的,v-bind 方法:
<Aritice v-bind="AriticeItem"></Aritice>
<!-- 也可 <Aritice :="AriticeItem"></Aritice>-->
<!-- 子组件中的声明不需要改变,但是需要将用到的AriticeItem的属性,都通过 defineProps 显示出来-->
每一个在组件上 v-bind( : ) 的值,都不应该重复(无参数的v-bind重复出现,编辑器会报错)。如果出现同名的 v-bind 绑定,后绑定会覆盖前一个。
需要注意的是,props的名称不应该与组件中的其它属性名称重复。