Vue.js前端开发零基础教学（四）

学习目标：

熟悉选项式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'

运行结果：