VUE3组件 (1) 关于defineProps()

前言

以下代码和内容的使用都是在setup中，未使用TS。

<script setup>
</script>

---

VUE3组件 (2) 关于defineEmits()

VUE3组件 (3) 关于 slot 插槽

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的名称不应该与组件中的其它属性名称重复。

参考

单文件组件
组件基础
Props