10-插槽Slot

前言

本文章来源于王红元老师（coderwhy）的 Vue3 + Ts 课程
附上链接：https://ke.qq.com/course/3453141
谁能拒绝一个*100%好评还加课的老师呢

认识插槽Slot

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

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

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

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

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

  • 中间区域可能显示一个搜索框，也可能是一个列表，也可能是一个标题，等等；

  • 右边可能是一个文字，也可能是一个图标，也可能什么都不显示；

    

如何使用插槽slot？

• 这个时候我们就可以来定义插槽slot：
  • 插槽的使用过程其实是抽取共性、预留不同；
  • 我们会将共同的元素、内容依然在组件内进行封装；
  • 同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素；
• 如何使用slot呢？
  • Vue中将 元素作为承载分发内容的出口；
  • 在封装组件中，使用特殊的元素就可以为封装组件开启一个插槽；
  • 该插槽插入什么内容取决于父组件如何使用；

插槽的基本使用

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

• 我们在App.vue中使用它们：我们可以插入普通的内容、html元素、组件元素，都可以是可以的；

  

插槽的默认内容

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

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

  

多个插槽的效果

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

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

  

具名插槽的使用

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

  • 具名插槽顾名思义就是给插槽起一个名字， 元素有一个特殊的 attribute：name；
  • 一个不带 name 的slot，会带有隐含的名字 default；

  

动态插槽名

• 什么是动态插槽名呢？

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

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

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

    

具名插槽使用的时候缩写

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

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

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

    

渲染作用域

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

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

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

  • 在我们的案例中ChildCpn自然是可以让问自己作用域中的title内容的；
  • 但是在App中，是访问不了ChildCpn中的内容的，因为它们是跨作用域的访问；

  

认识作用域插槽

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

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

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

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

  

独占默认插槽的缩写

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

  

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

  

默认插槽和具名插槽混合

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

  

• 只要出现多个插槽，请始终为所有的插槽使用完整的基于

  

切换组件案例

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

  • 点击一个tab-bar，切换不同的组件显示；

    

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

  • 方式一：通过v-if来判断，显示不同的组件；
  • 方式二：动态组件的方式；

v-if显示不同的组件

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

动态组件的实现

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

  

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

  • 可以是通过component函数注册的组件；
  • 在一个组件对象的components对象中注册的组件；

动态组件的传值

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

  • 也是一样的；

  • 只是我们需要将属性和监听事件放到component上来使用；

    

认识keep-alive

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

  • 在其中增加了一个按钮，点击可以递增的功能；

    

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

• 答案是否定的；

• 这是因为默认情况下，我们在切换组件后，about组件会被销毁掉，再次回来时会重新创建组件；

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

  

keep-alive属性

• keep-alive有一些属性：

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

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

  • 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示；

  • 匹配首先检查组件自身的 name 选项；

    

缓存组件的生命周期

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

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

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

    

Webpack的代码分包

• 默认的打包过程：

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

• 打包时，代码的分包：

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

• 那么webpack中如何可以对代码进行分包呢？

  

Vue中实现异步组件

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

• defineAsyncComponent接受两种类型的参数：

  • 类型一：工厂函数，该工厂函数需要返回一个Promise对象；
  • 类型二：接受一个对象类型，对异步函数进行配置；

• 工厂函数类型一的写法：

  

• 写法二

  

异步组件和Suspense

• 注意：目前（2021-06-08）Suspense显示的是一个实验性的特性，API随时可能会修改。

• Suspense是一个内置的全局组件，该组件有两个插槽：

  • default：如果default可以显示，那么显示default的内容；

  • fallback：如果default无法显示，那么会显示fallback插槽的内容；

    

$refs的使用

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

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

• 组件实例有一个$refs属性：

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

    

$parent和$root

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

• HelloWorld.vue的实现：

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

    

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