前言

  • 认识组件的嵌套
  • 组件的拆分
  • 组件的通信
  • 父子组件之间通信的方式
  • 父组件传递给子组件
  • 子组件传递给父组件
  • 自定义事件的流程
  • 非父子组件的通信
  • 认识插槽 Slot
  • 切换组件案例
  • 动态组件的传值
  • 认识 keep-alive
  • 缓存组件的生命周期
  • Webpack 的代码分包
  • Vue 中实现异步组件
  • $refs 的使用
  • $parent和$root
  • 认识生命周期
  • 组件的 v-model
  • 认识 Mixin

认识组件的嵌套

前面我们是将所有的逻辑放到一个 App.vue 中:

  • 如果我们一个应用程序将所有的逻辑都放在一个组件中,那么这个组件就会变成非常的臃肿和难以维护
  • 所以组件化的核心思想应该是对组件进行拆分,拆分成一个个小的组件
  • 将这些组件组合嵌套在一起,最终形成我们的应用程序

我们来分析一下下面代码的嵌套逻辑,假如我们将所有的代码逻辑都放到一个 App.vue 组件中:

  • 我们会发现,将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的。
  • 并且在真实开发中,我们会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常差的。
  • 所以,在真实的开发中,我们会对组件进行拆分,拆分成一个个功能的小组件。

组件的拆分

我们可以按照如下的方式进行拆分:

image-20211006100554232

按照如上的拆分方式后,我们开发对应的逻辑只需要去对应的组件编写就可。

组件的通信

上面的嵌套逻辑如下,它们存在如下关系:

  • App 组件是 Header、Main、Footer 组件的父组件
  • Main 组件是 Banner 、ProductList 组件的父组件

在开发过程中,我们会经常遇到需要组件之间相互进行通信

  • 比如App可能使用了多个Header,每个地方的Header展示的内容不同,那么我们就需要使用者传递给Header一些数据,让其进行展示;
  • 又比如我们在 Main 中一次性请求了Banner数据和ProductList数据,那么就需要传递给它们来进行展示;
  • 也可能是子组件中发生了事件,需要由父组件来完成某些操作,那就需要子组件向父组件传递事件

总之,在一个 Vue 项目中,组件之间的通信是非常重要的环节,所以接下来我们就具体学习一下组件之间是如何相

互之间传递数据的;

父子组件之间通信的方式

父子组件之间如何进行通信呢?

父组件传递给子组件:通过 props 属性

子组件传递给父组件:通过$emit 触发事件

image-20211006100914260

父组件传递给子组件

在开发中很常见的就是父子组件之间通信,比如父组件有一些数据,需要子组件来进行展示:

这个时候我们可以通过 props 来完成组件之间的通信;

什么是 Props 呢?

Props 是你可以在组件上注册一些自定义的 attribute;

父组件给这些 attribute 赋值,子组件通过 attribute 的名称获取到对应的值;

Props 有两种常见的用法:

方式一:字符串数组,数组中的字符串就是 attribute 的名称;

方式二:对象类型,对象类型我们可以在指定 attribute 名称的同时,指定它需要传递的类型、是否是必须的、

默认值等等;

Props 的数组用法

image-20211006101106104

Props 的对象用法

数组用法中我们只能说明传入的 attribute 的名称,并不能对其进行任何形式的限制,接下来我们来看一下对象的

写法是如何让我们的 props 变得更加完善的。

当使用对象语法的时候,我们可以对传入的内容限制更多:

  • 比如指定传入的 attribute 的类型;
  • 比如指定传入的 attribute 是否是必传的;
  • 比如指定没有传入时,attribute 的默认值;

image-20211006101157833

细节一:那么 type 的类型都可以是哪些呢?

那么 type 的类型都可以是哪些呢?

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol
细节二:对象类型的其他写法

image-20211006101253610

细节三:Prop 的大小写命名

Prop 的大小写命名(camelCase vs kebab-case)

  • HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符
  • 这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

image-20211006101455391

非 Prop 的 Attribute

什么是非 Prop 的 Attribute 呢?

当我们传递给一个组件某个属性,但是该属性并没有定义对应的props或者emits时,就称之为 非 PropAttribute

常见的包括classstyleid属性等;

Attribute 继承

当组件有单个根节点时,非 Prop 的 Attribute 将自动添加到根节点的 Attribute 中:

image-20211006101745698

禁用 Attribute 继承和多根节点

如果我们不希望组件的根元素继承 attribute,可以在组件中设置 inheritAttrs: false

禁用 attribute 继承的常见情况需要将attribute应用于根元素之外的其他元素

我们可以通过 $attrs来访问所有的 非props的attribute

image-20211006101900826

多个根节点的 attribute

多个根节点的 attribute 如果没有显示的绑定,那么会报警告,我们必须手动的指定要绑定到哪一个属性上:

image-20211006102000682

子组件传递给父组件

什么情况下子组件需要传递内容到父组件呢?

子组件有一些事件发生的时候,比如在组件中发生了点击,父组件需要切换内容;

子组件有一些内容想要传递给父组件的时候;

我们如何完成上面的操作呢?

首先,我们需要在子组件中定义好在某些情况下触发的事件名称

其次,在父组件中以v-on的方式传入要监听的事件名称,并且绑定到对应的方法中;

最后,在子组件中发生某个事件的时候,根据事件名称触发对应的事件

自定义事件的流程

我们封装一个 CounterOperation.vue 的组件:

内部其实是监听两个按钮的点击,点击之后通过 this.$emit 的方式发出去事件;

image-20211006102441547

自定义事件的参数和验证

自定义事件的时候,我们也可以传递一些参数给父组件:

image-20211006102552878

在 vue3 当中,我们可以对传递的参数进行验证:

image-20211006102605124

非父子组件的通信

在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信。

这里我们主要讲两种方式:

  • Provide/Inject;
  • Mitt全局事件总线;

Provide 和 Inject

Provide/Inject 用于非父子组件之间共享数据

  • 比如有一些深度嵌套的组件子组件想要获取父组件的部分内容
  • 在这种情况下,如果我们仍然将props沿着组件链逐级传递下去,就会非常的麻烦;

对于这种情况下,我们可以使用 Provide 和 Inject :

  • 无论层级结构有多深,父组件都可以作为其所有子组件的依赖提供者;
  • 父组件有一个 provide 选项来提供数据;
  • 子组件有一个 inject 选项来开始使用这些数据;

实际上,你可以将依赖注入看作是“long range props”,除了:

  • 父组件不需要知道哪些子组件使用它 provide 的 property
  • 子组件不需要知道 inject 的 property 来自哪里

image-20211006102913896

Provide 和 Inject 基本使用

我们开发一个这样的结构:

image-20211006102947159

Provide 和 Inject 函数的写法

如果 Provide 中提供的一些数据是来自 data,那么我们可能会想要通过 this 来获取

这个时候会报错:

这里给大家留一个思考题,我们的 this 使用的是哪里的 this?

image-20211006103026172

处理响应式数据

我们先来验证一个结果:如果我们修改了 this.names 的内容,那么使用 length 的子组件会不会是响应式的?

我们会发现对应的子组件中是没有反应的

  • 这是因为当我们修改了 names 之后,之前在 provide 中引入的 this.names.length 本身并不是响应式的;

那么怎么样可以让我们的数据变成响应式的呢?

非常的简单,我们可以使用响应式的一些API来完成这些功能,比如说computed函数;

当然,这个 computed 是 vue3 的新特性,在后面我会专门讲解,这里大家可以先直接使用一下;

注意:我们在使用 length 的时候需要获取其中的 value

这是因为computed返回的是一个ref对象,需要取出其中的value来使用

image-20211006103229325

全局事件总线 mitt 库

Vue3 从实例中移除了 $on、$off 和 $once 方法,所以我们如果希望继续使用全局事件总线,要通过第三方的库

  • Vue3 官方有推荐一些库,例如 mitttiny-emitter
  • 这里我们主要讲解一下 mitt 库的使用;

首先,我们需要先安装这个库:

1
npm install mitt

其次,我们可以封装一个工具 eventbus.js:

image-20211006103448729

使用事件总线工具

在项目中可以使用它们:

  • 我们在 Home.vue 中监听事件;
  • 我们在 App.vue 中触发事件;

image-20211006103520240

Mitt 的事件取消

在某些情况下我们可能希望取消掉之前注册的函数监听

image-20211006103551765

认识插槽 Slot

在开发中,我们会经常封装一个个可复用的组件:

  • 前面我们会通过props传递给组件一些数据,让组件来进行展示;
  • 但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素;
  • 比如某种情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使用组件希望显示的是一张图片
  • 我们应该让使用者可以决定某一块区域到底存放什么内容和元素

举个例子:假如我们定制一个通用的导航组件 - NavBar

  • 这个组件分成三块区域:左边-中间-右边,每块区域的内容是不固定;
  • 左边区域可能显示一个菜单图标,也可能显示一个返回按钮,可能什么都不显示;
  • 中间区域可能显示一个搜索框,也可能是一个列表,也可能是一个标题,等等;
  • 右边可能是一个文字,也可能是一个图标,也可能什么都不显示;

image-20211006103753316

如何使用插槽 slot?

这个时候我们就可以来定义插槽 slot:

  • 插槽的使用过程其实是抽取共性、预留不同
  • 我们会将共同的元素、内容依然在组件内进行封装;
  • 同时会将不同的元素使用slot作为占位,让外部决定到底显示什么样的元素;

如何使用 slot 呢?

  • Vue 中将 <slot> 元素作为承载分发内容的出口;
  • 在封装组件中,使用特殊的元素<slot>就可以为封装组件开启一个插槽;
  • 该插槽插入什么内容取决于父组件如何使用;

插槽的基本使用

我们一个组件 MySlotCpn.vue:该组件中有一个插槽,我们可以在插槽中放入需要显示的内容

我们在 App.vue 中使用它们:我们可以插入普通的内容、html 元素、组件元素,都可以是可以的;

image-20211006104015780

插槽的默认内容

有时候我们希望在使用插槽时,如果没有插入对应的内容,那么我们需要显示一个 默认的内容

当然这个默认的内容只会在没有提供插入的内容时,才会显示;

image-20211006104121258

多个插槽的效果

我们先测试一个知识点:如果一个组件中含有多个插槽我们插入多个内容时是什么效果

我们会发现默认情况下每个插槽都会获取到我们插入的内容来显示;

image-20211006104303403

具名插槽的使用

事实上,我们希望达到的效果是插槽对应的显示,这个时候我们就可以使用 具名插槽:

具名插槽顾名思义就是给插槽起一个名字,<slot> 元素有一个特殊的 attribute:name;

一个不带 name 的slot,会带有隐含的名字 default

image-20211006104416427

动态插槽名

什么是动态插槽名呢?

目前我们使用的插槽名称都是固定的;

比如 v-slot:left、v-slot:center 等等;

我们可以通过 v-slot:[dynamicSlotName]方式动态绑定一个名称;

image-20211006104447825

具名插槽使用的时候缩写

跟 v-on 和 v-bind 一样,v-slot 也有缩写

即把参数之前的所有内容 (v-slot:) 替换为字符 #

image-20211006104516853

渲染作用域

在 Vue 中有渲染作用域的概念:

父级模板里的所有内容都是在父级作用域中编译的;

子模板里的所有内容都是在子作用域中编译的;

如何理解这句话呢?我们来看一个案例:

在我们的案例中 ChildCpn 自然是可以让问自己作用域中的 title 内容的;

但是在 App 中,是访问不了 ChildCpn 中的内容的,因为它们是跨作用域的访问;

image-20211006104628008

认识作用域插槽

但是有时候我们希望插槽可以访问到子组件中的内容是非常重要的:

  • 当一个组件被用来渲染一个数组元素时,我们使用插槽,并且希望插槽中没有显示每项的内容
  • 这个 Vue 给我们提供了作用域插槽

我们来看下面的一个案例:

  1. 在 App.vue 中定义好数据
  2. 传递给 ShowNames 组件中
  3. ShowNames 组件中遍历 names 数据
  4. 定义插槽的 prop
  5. 通过 v-slot:default 的方式获取到 slot 的 props
  6. 使用 slotProps 中的 item 和 index

image-20211006104738405

独占默认插槽的缩写

如果我们的插槽是默认插槽 default,那么在使用的时候 v-slot:default=”slotProps”可以简写为 v-slot=”slotProps”:

image-20211006104804206

并且如果我们的插槽只有默认插槽时,组件的标签可以被当做插槽的模板来使用,这样,我们就可以将 v-slot 直接用在组件上:

image-20211006104825923

默认插槽和具名插槽混合

但是,如果我们有默认插槽和具名插槽,那么按照完整的 template 来编写。

image-20211006104930899

只要出现多个插槽,请始终为所有的插槽使用完整的基于 <template> 的语法:

image-20211006105001660

切换组件案例

比如我们现在想要实现了一个功能:

点击一个 tab-bar,切换不同的组件显示;

image-20211006105054126

这个案例我们可以通过两种不同的实现思路来实现:

方式一:通过 v-if 来判断,显示不同的组件;

方式二:动态组件的方式;

v-if 显示不同的组件

我们可以先通过 v-if 来判断显示不同的组件,这个可以使用我们之前讲过的知识来实现:

image-20211006105140908

动态组件的实现

动态组件是使用 component 组件通过一个特殊的attribute is 来实现:

image-20211006105242139

这个 currentTab 的值需要是什么内容呢?

可以是通过component函数注册的组件;

在一个组件对象的components对象中注册的组件

动态组件的传值

如果是动态组件我们可以给它们传值和监听事件吗?

也是一样的;只是我们需要将属性和监听事件放到 component 上来使用

image-20211006105342614

认识 keep-alive

我们先对之前的案例中 About 组件进行改造:

在其中增加了一个按钮,点击可以递增的功能;

image-20211006105419148

比如我们将 counter 点到 10,那么在切换到 home 再切换回来 about 时,状态是否可以保持呢?

  • 答案是否定的;
  • 这是因为默认情况下,我们在切换组件后about组件会被销毁掉,再次回来时会重新创建组件

但是,在开发中某些情况我们希望继续保持组件的状态,而不是销毁掉,这个时候我们就可以使用一个内置组件:keep-alive

image-20211006105510730

keep-alive 属性

keep-alive 有一些属性:

  • include - string | RegExp | Array。只有名称匹配的组件会被缓存;
  • exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存;
  • max - number | string。最多可以缓存多少组件实例,一旦达到这个数字,那么缓存组件中最近没有被访问的实例会被销毁;

include 和 exclude prop 允许组件有条件地缓存:

  • 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示;
  • 匹配首先检查组件自身的 name 选项

缓存组件的生命周期

对于缓存的组件来说,再次进入时,我们是不会执行 created 或者 mounted 等生命周期函数的:

但是有时候我们确实希望监听到何时重新进入到了组件,何时离开了组件;

这个时候我们可以使用 activated 和 deactivated 这两个生命周期钩子函数来监听;

image-20211006105659769

Webpack 的代码分包

默认的打包过程:

  • 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个 app.js 文件中);
  • 这个时候随着项目的不断庞大app.js文件的内容过大,会造成首屏的渲染速度变慢

打包时,代码的分包:

  • 所以,对于一些不需要立即使用的组件,我们可以单独对它们进行拆分,拆分成一些小的代码块chunk.js
  • 这些 chunk.js 会在需要时从服务器加载下来,并且运行代码,显示对应的内容;
  • 那么 webpack 中如何可以对代码进行分包呢?

image-20211006105904341

Vue 中实现异步组件

如果我们的项目过大了,对于某些组件我们希望通过异步的方式来进行加载(目的是可以对其进行分包处理),那么 Vue 中给我们提供了一个函数:defineAsyncComponent

defineAsyncComponent 接受两种类型的参数:

类型一:工厂函数,该工厂函数需要返回一个 Promise 对象;

类型二:接受一个对象类型,对异步函数进行配置;

工厂函数类型一的写法:

image-20211006110104256

异步组件的写法二

image-20211006110121198

异步组件和 Suspense

注意:目前(2021-06-08)Suspense 显示的是一个实验性的特性,API 随时可能会修改。

Suspense 是一个内置的全局组件,该组件有两个插槽:

default:如果 default 可以显示,那么显示 default 的内容;

fallback:如果 default 无法显示,那么会显示 fallback 插槽的内容;

image-20211006110257956

$refs 的使用

某些情况下,我们在组件中想要直接获取到元素对象或者子组件实例

  • 在 Vue 开发中我们是不推荐进行DOM操作的;
  • 这个时候,我们可以给元素或者组件绑定一个ref的attribute属性

组件实例有一个$refs 属性:

它是一个对象 Object,持有注册过 ref attribute 的所有 DOM 元素和组件实例

image-20211006110448187

$parent和$root

我们可以通过$parent 来访问父元素。

HelloWorld.vue 的实现:

这里我们也可以通过$root 来实现,因为 App 是我们的根组件;

image-20211006110519565

注意:在 Vue3 中已经移除了$children 的属性,所以不可以使用了。

认识生命周期

什么是生命周期呢?

  • 每个组件都可能会经历从创建挂载更新卸载等一系列的过程;
  • 在这个过程中的某一个阶段,用于可能会想要添加一些属于自己的代码逻辑(比如组件创建完后就请求一些服务器数据);
  • 但是我们如何可以知道目前组件正在哪一个过程呢?Vue 给我们提供了组件的生命周期函数

生命周期函数:

  • 生命周期函数是一些钩子函数,在某个时间会被Vue源码内部进行回调
  • 通过对生命周期函数的回调,我们可以知道目前组件正在经历什么阶段
  • 那么我们就可以在该生命周期中编写属于自己的逻辑代码了;

生命周期的流程

image-20211006110753382

组件的 v-model

前面我们在input中可以使用v-model来完成双向绑定:

  • 这个时候往往会非常方便,因为 v-model 默认帮助我们完成了两件事;
  • v-bind:value的数据绑定@input的事件监听

如果我们现在封装了一个组件,其他地方在使用这个组件时,是否也可以使用 v-model 来同时完成这两个功能呢?

  • 也是可以的,vue 也支持在组件上使用 v-model;

当我们在组件上使用的时候,等价于如下的操作:

  • 我们会发现和input元素不同的只是属性的名称和事件触发的名称而已;

image-20211006111033627

组件 v-model 的实现

那么,为了我们的 MyInput 组件可以正常的工作,这个组件内的 <input> 必须:

  • 将其 value attribute 绑定到一个名叫 modelValue 的 prop 上;
  • 在其 input 事件被触发时,将新的值通过自定义的 update:modelValue 事件抛出

MyInput.vue 的组件代码如下:

image-20211006111118213

computed 实现

我们依然希望在组件内部按照双向绑定的做法去完成,应该如何操作呢?我们可以使用计算属性的 setter 和 getter 来完成。

image-20211006111138999

绑定多个属性

我们现在通过 v-model 是直接绑定了一个属性,如果我们希望绑定多个属性呢?

  • 也就是我们希望在一个组件上使用多个v-model是否可以实现呢?
  • 我们知道,默认情况下的 v-model 其实是绑定了 modelValue 属性@update:modelValue的事件;
  • 如果我们希望绑定更多,可以给v-model传入一个参数,那么这个参数的名称就是我们绑定属性的名称

注意:这里我是绑定了两个属性的

image-20211006111549814

v-model:title 相当于做了两件事:

  1. 绑定了title属性
  2. 监听了 @update:title的事件

image-20211006111620669