目录
3.1 选项式API和组合式API
3.2 生命周期函数
3.3 组件的注册和引用
3.4 解决组件之间的样式冲突
编辑 3.5 父组件向子组件传递数据
3.5.1 动态绑定props
3.5.2 验证props
3.6 子组件向父组件传递数据
3.6.1 在子组件中声明自定义事件
3.6.2 在子组件中触发自定义事件
3.6.3 在父组件中监听自定义事件
3.7 跨级组件之间的数据传递
学习目标：
熟悉选项式API和组合式API，能够说出选项式API和组合式API的区别
掌握注册组件的方法，能够运用全局注册或者局部注册的方式完成组件的注册
掌握父组件向子组件传递数据的方法，能够使用props实现数据传递等等
前言
在学习完第2章的基础知识后，可以编写一些简单的组件了，但是这样的组件功能比较简单，无法满足实际项目开发中各种复杂的需求。为了能够更灵活地使用组件，还需要更深入地学习组件的相关知识。第3章和第4章共两章的篇幅详细讲解组件基础，本章为上半部分内容。
3.1 选项式API和组合式API
Vue 3支持选项式API和组合式API。其中，选项式API是从Vue 2开始使用的一种写法，而Vue 3新增了组合式API的写法。
选项式API
选项式API是一种通过包含多个选项的对象来描述组件逻辑的API，其常用的选项包括data、methods、computed、watch等。
组合式API
相比于选项式API，组合式API是将组件中的数据、方法、计算属性、侦听器等代码全部组合在一起，写在setup()函数中。
选项式API的语法格式如下。
<script>
export default {
data() {
return { // 定义数据 }
},
methods: { // 定义方法 },
computed: { // 定义计算属性 },
watch: { // 定义侦听器 }
}
</script>组合式API的语法格式如下。
<script>
import { computed, watch } from 'vue'
export default {
setup() {
const 数据名 = 数据值
const 方法名 = () => {}
const 计算属性名 = computed(() => {})
watch(侦听器的来源, 回调函数, 可选参数)
return { 数据名, 方法名, 计算属性名 }
}
}
</script>Vue还提供了setup语法糖，用于简化组合式API的代码。使用setup语法糖时，组合式API的语法格式如下。
<script setup>
import { computed, watch } from 'vue'
// 定义数据
const 数据名 = 数据值
// 定义方法
const 方法名 = () => {}
// 定义计算属性
const 计算属性名 = computed(() => {})
// 定义侦听器
watch(侦听器的来源, 回调函数, 可选参数)
</script>选项式API和组合式API的关系
Vue提供的选项式API和组合式API这两种写法可以覆盖大部分的应用场景，它们是同一底层系统所提供的两套不同的接口。选项式API是在组合式API的基础上实现的。
企业在开发大型项目时，随着业务复杂度的增加，代码量会不断增加。 如果使用选项式API，整个项目逻辑不易阅读和理解，而且查找对应功能的代码会存在一定难度。 如果使用组合式API，可以将项目的每个功能的数据、方法放到一起，这样不管项目的大小，都可以快速定位到功能区域的相关代码，便于阅读和维护。
同时，组合式API可以通过函数来实现高效的逻辑复用，这种形式更加自由，需要开发者有较强的代码组织能力和拆分逻辑能力。
演示选项式API和组合式API的使用方法
创建src\components\CustomSub.vue文件，用于演示组合式API的写法，在该文件中实现单击“+1”按钮使数字加1的效果。
<template>
<p>子组件count值为：{{count}}</p>
<!-- 出发自定义事件 -->
<button @click="add">count+n</button>
</template>
<script setup>
import { ref } from 'vue';
// 声明自定义事件
const emit=defineEmits(['updateCount']);
const count=ref(1);
const add = () =>{
count.value++
// add()方法
emit('updateCount',2)
}
</script>
<style>
</style>创建src\components\CustomFarther.vue文件
<template>
<!-- 引用子组件，监听自定义事件 -->
<p>父组件number的值：{{number}}</p>
<CustomSub @updateCount="updateEmitCount"/>
</template>
<script setup>
import CustomSub from'./CustomSub.vue'
import { ref } from 'vue';
// 局部注册子组件
const number =ref(10);
const updateEmitCount = (value) =>{
number.value +=value
emit('updateCount',2)
}
</script>
<style>
</style>修改src\main.js文件，切换页面中显示的组件。
import { createApp } from 'vue'
import App from './components/CustomFarther.vue'
const app=createApp(App)
import GlobalComponent from './components/GlobalComponent.vue'
app.component("GlobalComponent", GlobalComponent)
app.mount('#app')运行结果：
持续点击count父组件会随着子组件的增加而增加：
3.2 生命周期函数
概念：在Vue中，组件的生命周期是指每个组件从被创建到被销毁的整个过程，每个组件都有生命周期。如果想要在某个特定的时机进行特定的处理，可以通过生命周期函数来完成。 随着组件生命周期的变化，生命周期函数会自动执行。
组合式API下的生命周期函数如下表所示。
以onMounted()函数为例演示生命周期函数的使用。
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
// 执行操作
})
</script>演示生命周期函数的使用方法
创建src\components\LifecycleHooks.vue文件，用于通过生命周期函数查看在特定时间点下的DOM元素。
<template> <div class="container">container</div> </template>
<script setup>
import { onBeforeMount, onMounted } from 'vue'
onBeforeMount(() => {
console.log('DOM元素渲染前', document.querySelector('.container'))
})
onMounted(() => {
console.log('DOM元素渲染后', document.querySelector('.container'))
})
</script>修改mian.js文件
import { createApp } from 'vue'
import App from './components/LifecycleHooks..vue'
createApp(App).mount('#app')运行效果：
选项式API下的生命周期函数如下表所示。
演示选项式API下beforeCreate()函数和created()函数的使用。
<script>
export default {
data() { return { value: 'Hello Vue.js' } },
beforeCreate() {
console.log('实例对象创建前: ' + this.value)
},
created() {
console.log('实例对象创建后: ' + this.value)
}
}
</script>3.3 组件的注册和引用
当在Vue项目中定义了一个新的组件后，要想在其他组件中引用这个新的组件，需要对新的组件进行注册。在注册组件的时候，需要给组件取一个名字，从而区分每个组件，可以采用帕斯卡命名法（PascalCase）为组件命名。 Vue提供了两种注册组件的方式，分别是全局注册和局部注册。
帕斯卡命名法（PascalCase）： 帕斯卡命名法（Pascal Case）是一种在编程中使用的命名约定，它要求将变量名和函数名称等标识符的每个单词首字母大写，并且单词之间直接相连，没有空格。这种命名法通常用于类名、函数名、属性名等标识符的命名。
例如，类名可以使用帕斯卡命名法表示为`MyClass`、`PersonInfo`、`GameManager`；方法名可以是`CalculateTotalScore()`、`PrintUserInfo()`、`InitializeGameWorld()`；属性名可以是`PlayerName`、`HighScore`、`IsGameOver`。
1. 全局注册
在实际开发中，如果某个组件的使用频率很高，许多组件中都会引用该组件，则推荐将该组件全局注册。被全局注册的组件可以在当前Vue项目的任何一个组件内引用。
在Vue项目的src\main.js文件中，通过Vue应用实例的component()方法可以全局注册组件，该方法的语法格式如下。
component('组件名称', 需要被注册的组件)上述语法格式中，component()方法接收两个参数，第1个参数为组件名称，注册完成后即可全局使用该组件名称，第2个参数为需要被注册的组件。
在src\main.js文件中注册一个全局组件MyComponent，示例代码如下。
import { createApp } from 'vue';
import './style.css'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'
const app = createApp(App)
app.component('MyComponent', MyComponent)
app.mount('#app')component()方法支持链式调用，可以连续注册多个组件，示例代码如下。
app.component('ComponentA', ComponentA)
.component('ComponentB', ComponentB)
.component('ComponentC', ComponentC)2. 局部注册
在实际开发中，如果某些组件只在特定的情况下被用到，推荐进行局部注册。局部注册即在某个组件中注册，被局部注册的组件只能在当前注册范围内使用。 局部注册组件的示例代码如下。
<script>
import ComponentA from './ComponentA.vue'
export default {
components: { ComponentA: ComponentA }
}
</script>在使用setup语法糖时，导入的组件会被自动注册，无须手动注册，导入后可以直接在模板中使用，示例代码如下。
<script setup>
import ComponentA from './ComponentA.vue'
</script>将组件注册完成后，若要将组件在页面中渲染出来，需要引用组件。 在组件的<template>标签中可以引用其他组件，被引用的组件需要写成标签的形式，标签名应与组件名对应。
组件的标签名可以使用短横线分隔或帕斯卡命名法命名。例如，<my-component>标签和<MyComponent>标签都表示引用MyComponent组件。一个组件可以被引用多次，但不可出现自我引用和互相引用的情况，否则会出现死循环。
演示组件的使用方法
创建src\components\GlobalComponent.vue文件，表示全局组件。
<template>
<div class="global-container"><h5>全局组件</h5></div>
</template>
<style>
.global-container {
border: 1px solid black;
height: 50px;
flex: 1;
}
</style>创建src\components\LocalComponent.vue文件，表示局部组件。
<template>
<div class="local-container">
<h5>局部组件</h5>
</div>
</template>
<style>
.local-container {
border: 1px dashed black;
height: 50px;
flex: 1;
}
</style>修改src\main.js文件，导入GlobalComponent组件并调用component()方法全局注册GlobalComponent组件。
import { createApp } from 'vue'
import './style.css'
import App from './components/ComponentUse.vue'
import GlobalComponent from './components/GlobalComponent.vue'
const app = createApp(App)
app.component('GlobalComponent', GlobalComponent)
app.mount('#app')修改src\components\ComponentUse.vue文件，添加代码导入LocalComponent组件。
<script setup>
import LocalComponent from './LocalComponent.vue'
</script>运行结果如下：
3.4 解决组件之间的样式冲突
在默认情况下，写在Vue组件中的样式会全局生效，很容易造成多个组件之间的样式冲突问题。例如，为ComponentUse组件中的h5元素添加边框样式，具体代码如下。
h5 {
border: 1px dotted black;
}运行效果如下：
原因：
导致组件之间样式冲突的根本原因是：在单页Web应用中，所有组件的DOM结构都是基于唯一的index.html页面进行呈现的。每个组件中的样式都可以影响整个页面中的DOM元素。 在Vue中可以使用scoped属性和深度选择器来解决组件之间的样式冲突。
1. scoped属性
Vue为<style>标签提供了scoped属性，用于解决组件之间的样式冲突。
为<style>标签添加scoped属性后，Vue会自动为当前组件的DOM元素添加一个唯一的自定义属性（如data-v-7ba5bd90），并在样式中为选择器添加自定义属性（如.list[data-v-7ba5bd90]），从而限制样式的作用范围，防止组件之间的样式冲突问题。
下面演示scoped属性的使用。
修改ComponentUse组件，为<style>标签添加scoped属性，具体代码如下。
<style scoped>运行结果：
打开开发者工具，切换到Elements面板，查看父组件的h5元素的代码，如下图所示。
从上图可以看出，当<style>标签添加scoped属性后，h5元素和相应的选择器被Vue自动添加了data-v-e4f30916属性，从而解决了样式冲突的问题。
2. 深度选择器
如果给当前组件的<style>标签添加了scoped属性，则当前组件的样式对其子组件是不生效的。 如果在添加了scoped属性后还需要让某些样式对子组件生效，则可以使用深度选择器来实现。
深度选择器通过:deep()伪类来实现，在其小括号中可以定义用于子组件的选择器，例如，“:deep(.title)”被编译之后生成选择器的格式为“[data-v-7ba5bd90] .title”。
演示如何通过ComponentUse组件更改LocalComponent组件的样式
为LocalComponent组件的h5元素添加class属性。
<h5 class="title">局部组件</h5>演示如何通过ComponentUse组件更改LocalComponent组件的样式
在ComponentUse组件中定义.title的样式。
:deep(.title){
border: 3px dotted black;
}运行结果为：
打开开发者工具，切换到Elements面板，查看LocalComponent组件的h5元素的代码，页面效果如下图所示。
3.5 父组件向子组件传递数据
在不使用setup语法糖的情况下，可以使用props选项声明props。props选项的形式可以是对象或字符串数组。声明对象形式的props的语法格式如下。
<script>
export default {
props: {
自定义属性A: 类型,
自定义属性B: 类型,
……
}
}
</script>如果不需要限制props的类型，可以声明字符串数组形式的props，示例代码如下。
props: ['自定义属性A', '自定义属性B'],当使用setup语法糖时，可使用defineProps()函数声明props，语法格式如下。
<script setup>
const props = defineProps({'自定义属性A': 类型}, {'自定义属性B': 类型})
</script>使用defineProps()函数声明字符串数组形式的props，语法格式如下。
const props = defineProps(['自定义属性A', '自定义属性B'])在组件中声明了props后，可以直接在模板中输出每个prop的值，语法格式如下。
<template>
{{ 自定义属性A }}
{{ 自定义属性B }}
</template>当在父组件中引用了子组件后，如果子组件中声明了props，则可以在父组件中向子组件传递数据。如果传递的数据是固定不变的，则可以通过静态绑定props的方式为子组件传递数据。
通过静态绑定props的方式为子组件传递数据，其语法格式如下。
<子组件标签名 自定义属性A="数据" 自定义属性B="数据" />在上述语法格式中，父组件向子组件的props传递了静态的数据，属性值默认为字符串类型。
注意：如果子组件中未声明props，则父组件向子组件中传递的数据会被忽略，无法被子组件使用。
演示父组件向子组件传递数据的方法
创建src\components\Count.vue文件，用于展示子组件的相关内容。
<template>
初始值为：{{ num }}
</template>
<script setup>
const props = defineProps({
num: String
})
</script>创建src\components\Props.vue文件，用于展示父组件的相关内容。
<template>
<Count num="1" />
</template>
<script setup>
import Count from './Count.vue'
</script>修改src\main.js文件，切换页面中显示的组件。
import App from './components/Props.vue'运行结果：
3.5.1 动态绑定props
1. 字符串
从父组件中为子组件传递字符串类型的props数据，示例代码如下。
<template>
<Child :init="username" />
</template>
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const username = ref('小圆')
</script>上述代码用到了名称为Child的子组件，该子组件的示例代码如下。
<template></template>
<script setup>
const props = defineProps(['init'])
console.log(props)
</script>2. 数字
从父组件中为子组件传递数字类型的props数据，示例代码如下。
<template>
<Child :init="12" />
<Child :init="age" />
</template>
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const age = ref(12)
</script>3. 布尔值
从父组件中为子组件传递布尔类型的props数据，示例代码如下。
<template>
<Child init />
<Child :init="false" />
<Child :init="isFlag" />
</template>
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const isFlag = ref(true)
</script>4. 数组
从父组件中为子组件传递数组类型的props数据，示例代码如下。
<template>
<Child :init="['唱歌', '跳舞', '滑冰']" />
<Child :init="hobby" />
</template>
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const hobby = ref(['唱歌', '跳舞', '滑冰'])
</script>5. 对象
从父组件中为子组件传入一个对象类型的props数据，或者将对象中的部分属性作为被传入的props数据，示例代码如下。
<template>
<Child :init=“{ height: '180厘米’, weight: '70千克' }" />
<Child :height="bodyInfo.height" :weight="bodyInfo.weight" />
<Child v-bind="bodyInfo" />
</template>
<script setup>
import Child from './Child.vue'
import { reactive } from 'vue'
const bodyInfo = reactive({
height: '180厘米',
weight: '70千克'
})
</script>props单向数据流
在Vue中，所有的props都遵循单向数据流原则，props数据因父组件的更新而变化，变化后的数据将向下流往子组件，而且不会逆向传递，这样可以防止因子组件意外变更props导致数据流向难以理解的问题。
每次父组件绑定的props发生变更时，子组件中的props都将会刷新为最新的值。开发者不应该在子组件内部改变props，如果这样做，Vue会在浏览器的控制台中发出警告。
3.5.2 验证props
概念：使用字符串数组形式的props的缺点是无法为每个prop指定具体的数据类型，而使用对象形式的props的优点是可以对每个prop进行数据类型的校验。
对象形式的props可以使用多种验证方案，包括基础类型检查、必填项的校验、属性默认值、自定义验证函数等。在声明props时，可以添加验证方案。
1. 基础类型检查
概念:在开发中，有时需要对从父组件中传递过来的props数据进行基础类型检查，这时可以通过type属性检查合法的类型，如果从父组件中传递过来的值不符合此类型，则会报错。
常见的类型有String（字符串）、Number（数字）、Boolean（布尔值）、Array（数组）、Object（对象）、Date（日期）、Function（函数）、Symbol（符号）以及任何自定义构造函数。
为props指定基础类型检查，示例代码如下。
props: {
自定义属性A: String, // 字符串
自定义属性B: Number, // 数字
自定义属性C: Boolean, // 布尔值
自定义属性D: Array, // 数组
自定义属性E: Object, // 对象
自定义属性F: Date, // 日期
自定义属性G: Function, // 函数
自定义属性H: Symbol, // 符号
}通过配置对象的形式定义验证规则，示例代码如下。
props: {
自定义属性: { type: Number },
}如果某个prop的类型不唯一，可以通过数组的形式为其指定多个可能的类型，示例代码如下。
props: {
自定义属性: { type: [String, Array] }, // 字符串或数组
}2. 必填项的校验
父组件向子组件传递props数据时，有可能传递的数据为空，但是在子组件中要求该数据是必须传递的。此时，可以在声明props时通过required属性设置必填项，强调组件的使用者必须传递属性的值，示例代码如下。
props: {
自定义属性: { required: true },
}3. 属性默认值
在声明props时，可以通过default属性定义属性默认值，当父组件没有向子组件的属性传递数据时，属性将会使用默认值，示例代码如下。
props: {
自定义属性: { default: 0 },
}4. 自定义验证函数
如果需要对从父组件中传入的数据进行验证，可以通过validator()函数来实现。validator()函数可以将prop的值作为唯一参数传入自定义验证函数，如果验证失败，则会在控制台中发出警告。为prop属性指定自定义验证函数的示例代码如下。
props: {
自定义属性: {
validator(value) {
return ['success', 'warning', 'danger'].indexOf(value) !== -1;
},
},
}3.6 子组件向父组件传递数据
3.6.1 在子组件中声明自定义事件
若想使用自定义事件，首先需要在子组件中声明自定义事件。 在不使用setup语法糖时，可以通过emits选项声明自定义事件，示例代码如下。
<script>
export default {
emits: ['demo']
}
</script>在使用setup语法糖时，需要通过调用defineEmits()函数声明自定义事件，示例代码如下。
<script setup>
const emit = defineEmits(['demo'])
</script>在上述代码中，defineEmits()函数的参数与emits选项中的相同。
3.6.2 在子组件中触发自定义事件
在子组件中声明自定义事件后，接着需要在子组件中触发自定义事件。 当使用场景简单时，可以使用内联事件处理器，通过调用$emit()方法触发自定义事件，将数据传递给使用的组件，示例代码如下。
<button @click="$emit('demo', 1)">按钮</button>在上述代码中，$emit()方法的第1个参数为字符串类型的自定义事件的名称，第2个参数为需要传递的数据，当触发当前组件的事件时，该数据会传递给父组件。
除了使用内联方式外，还可以直接定义方法来触发自定义事件。 在不使用setup语法糖时，可以从setup()函数的第2个参数（即setup上下文对象）来访问到emit()方法，示例代码如下。
export default {
setup(props, ctx) {
const update = () => {
ctx.emit('demo', 2)
}
return { update }
}
}如果使用setup语法糖，可以调用emit()函数来实现，示例代码如下。
<script setup>
const update = () => {
emit('demo', 2)
}
</script>3.6.3 在父组件中监听自定义事件
在父组件中通过v-on可以监听子组件中抛出的事件，示例代码如下。
<子组件名 @demo="fun" />在上述代码中，当触发demo事件时，会接收到从子组件中传递的参数，同时会执行fun()方法。父组件可以通过value属性接收从子组件中传递来的参数。 在父组件中定义fun()方法，示例代码如下。
const fun = value => {
console.log(value)
}3.7 跨级组件之间的数据传递
Vue提供了跨级组件之间数据传递的方式——依赖注入。一个父组件相对于其所有的后代组件而言，可作为依赖提供者。而任何后代的组件树，无论层级多深，都可以注入由父组件提供的依赖。 对于父组件而言，如果要为后代组件提供数据，需要使用provide()函数。对于子组件而言，如果想要注入上层组件或整个应用提供的数据，需要使用inject()函数。
1. provide()函数
provide()函数可以提供一个值，用于被后代组件注入。provide()函数的语法格式如下。
provide(注入名, 注入值)provide()函数可以接收2个参数，第1个参数是注入名，后代组件会通过注入名查找所需的注入值；第2个参数是注入值，值可以是任意类型，包括响应式数据，例如通过ref()函数创建的数据。
在不使用setup语法糖的情况下，provide()函数必须在组件的setup()函数中调用。使用provide()函数的示例代码如下。
<script>
import { ref, provide } from 'vue'
export default {
setup() {
const count = ref(1)
provide( 'message', count )
}
}
</script>当使用setup语法糖时，使用provide()函数的示例代码如下。
<script setup>
import { provide } from 'vue'
provide('message', 'Hello Vue.js')
</script>provide()函数除了可以在某个组件中提供依赖外，还可以全局提供依赖。例如，在src\main.js文件中添加全局依赖，示例代码如下
const app = createApp(App)
app.provide('message', 'Hello Vue.js')通过inject()函数可以注入上层组件或者整个应用提供的数据。inject()函数的语法格式如下。
inject(注入值, 默认值, 布尔值)inject()函数有3个参数。 第1个参数是注入值，Vue会遍历父组件，通过匹配注入的值来确定所提供的值，如果父组件链上多个组件为同一个数据提供了值，那么距离更近的组件将会覆盖更远的组件所提供的值。
第2个参数是可选的，用于在没有匹配到注入的值时使用默认值。第2个参数可以是工厂函数，用于返回某些创建起来比较复杂的值。如果提供的默认值是函数，还需要将false作为第3个参数传入，表明这个函数就是默认值，而不是工厂函数。
第3个参数是可选的，类型为布尔值，当参数值为false时，表示默认值是函数；当参数值为true时，表示默认值为工厂函数；当省略参数值时，表示默认值为其他类型的数据，不是函数或工厂函数。
在不使用setup语法糖的情况下，inject()函数必须在组件的setup()函数中调用。使用inject()函数的示例代码如下。
<script>
import { inject } from 'vue';
export default {
setup() {
const count = inject('count')
const foo = inject('foo', 'default value')
const baz = inject('foo', () => new Map())
const fn = inject('function', () => { }, false)
}
}
</script>当使用setup语法糖时，使用inject()函数的示例代码如下。
<script setup>
import { inject } from 'vue';
const count = inject('count')
</script>今天就分享到此，感谢预览~
