later-zc notes

Appearance

一. 认识插槽 Slot 作用 ​

1. 认识插槽 Slot ​

  • 在开发中，我们会经常封装一个个可复用的组件：

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

  • 举个栗子：假如我们定制一个通用的导航组件 - NavBar

    • 这个组件分成三块区域：左边-中间-右边，每块区域的内容是不固定

    • 左边区域可能显示一个菜单图标，也可能显示一个返回按钮，可能什么都不显示

    • 中间区域可能显示一个搜索框，也可能是一个列表，也可能是一个标题，等等右边可能是一个文字，也可能是一个图标，也可能什么都不显示

      image-20220801190236921

2. 如何使用插槽 slot？ ​

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

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

  • 如何使用 slot 呢？

    • Vue 中将 <slot> 元素在作为承载分发内容的出口

    • 在封装组件中，使用特殊的元素 <slot> 就可以为封装组件开启一个插槽

    • 该插槽插入什么内容取决于父组件如何使用

      image-20220801190428729

3. 插槽的默认内容 ​

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

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

      image-20220801190508661

4. 多个插槽的效果 ​

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

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

      image-20220801190607842

二. 插槽 Slot 基本使用 ​

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

  • 我们在 App.vue 中使用它们：

    • 我们可以插入普通的内容、html 元素、组件，都可以是可以的

      image-20220801190702788

三. 具名插槽 Slot 使用 ​

1. 具名插槽的使用 ​

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

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

    • 用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容

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

      image-20220801191031392

2. 动态插槽名 ​

  • 什么是动态插槽名呢？

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

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

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

      image-20220801191203530

3. 具名插槽使用的时候缩写 ​

  • 具名插槽使用的时候缩写：

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

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

      image-20220801191317090

四. 作用域插槽 Slot 使用 ​

1. 渲染作用域 ​

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

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

  • 如何理解这句话呢？我们来看一个案例：

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

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

      image-20220801191725637

2. 认识作用域插槽 ​

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

    • 当一个组件被用来渲染一个数组元素时，我们使用插槽，并且希望插槽中没有显示每项的内容
    • 有时候，我们在父组件中使用子组件的插槽时，插槽中的数据想使用子组件中的数据，但是因为父组件模板里的所有内容都是在父组件作用域中编译的，所以不能访问到子组件的数据
    • 所以，Vue 提供了作用域插槽：可以让我们在父组件中使用插槽时，访问到子组件中的内容/数据

  • 我们来看下面的一个案例：

    1. 在 App.vue 中定义好数据

    2. 传递给 ShowNames 组件中

    3. ShowNames 组件中遍历 names 数据

    4. 定义插槽的 prop

    5. 通过 v-slot:default 的方式获取到 slot 的 props

    6. 使用 slotProps 中的 item 和 index

      image-20220801194824295

3. 独占默认插槽的缩写 ​

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

    vue
    <show-names :names="names">
	<template v-slot="slotProps">
  	<span>{{slotProps.item}}-{{slotProps.index}}</span>
  </template>
</show-names>

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

    vue
    <show-names :names="names" v-slot="slotProps">
  	<span>{{slotProps.item}}-{{slotProps.index}}</span>
</show-names>

4. 默认插槽和具名插槽混合 ​

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

    image-20220801195443188

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

    image-20220801195506975

五. 全局事件总线使用 ​

1. 非父子组件的通信 ​

  • 在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信
  • 这里我们主要讲两种方式：
    • 全局事件总线
    • Provide / Inject

2. 全局事件总线 hy-event-store 库 ​

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

    • Vue3 官方有推荐一些库，例如 mitt 或 tiny-emitter
    • 这里我们主要讲解一下hy-event-store的使用

  • 首先，我们需要先安装这个库：

    shell
    npm i hy-event-store

  • 其次，我们可以封装一个工具 eventbus.js：

    js
    import { HYEventBus } from 'hy-event-store'

const eventBus = new HYEventBus()

export default eventBus

2. 使用事件总线工具 ​

  • 在项目中可以使用它们：

    • 我们在 App.vue 中监听事件

    • 我们在 Banner.vue 中触发事件

      image-20220801235043531

3. hy-event-store 的事件取消 ​

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

    js
    cancelListener() {
	eventBus.off('bannerClick', this.bannerClick)
}

六. 依赖注入 Provide / Inject ​

1. Provide提供 和 Inject注入 ​

  • Provide / Inject 用于非父子组件之间共享数据（主要用在祖先组件和后代组件之间的通信，其实也可以用在父子组件通信，只不过实际开发中父子组件通信用 props 和 $emit）：

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

  • 对于这种情况下，我们可以使用 Provide 和 Inject：

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

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

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

    • 子组件不需要知道 inject 的 property 来自哪里

      image-20220801235427095

2. Provide 和 Inject 基本使用 ​

  • 我们开发一个这样的结构：

    • 组件 HomeContent.vue 中可以通过 inject 选项获取到其祖先组件 App.vue 中通过 provide 选项提供的属性：name、age

      image-20220801235614784

3. Provide 和 Inject 函数的写法 ​

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

  • 这个时候会报错：

    • 如果我们需要提供依赖当前组件实例的状态 (比如那些由 data() 定义的数据属性)，那么可以以函数形式使用 provide

    • 这里给大家留一个思考题，我们的 this 使用的是哪里的 this？

      image-20220801235718004

4. 处理响应式数据 ​

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

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

    • 这是因为当我们修改了 names 之后，之前在 provide 中引入的 this.names.length 本身并不是响应式的，因为其保存的是值类型

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

    • 非常的简单，我们可以使用响应式的一些 API 来完成这些功能，比如说 computed 函数
    • 当然，这个 computed 是 vue3 的新特性，后面会专门讲解，这里大家可以先直接使用一下

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

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

      image-20220802000000622

Released under the MIT License.

Copyright © 2024-present later-zc