冇事来学系--Vue2.0中动态组件和插槽slot

---

theme: geek-black

highlight: a11y-light

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

动态组件指的是动态切换组件的显示与隐藏。

实现动态组件的渲染

vue提供了一个内置的 组件 ，专门用来实现动态组件的渲染。

<template> // component组件使用的时候可以看作是一个占位的符号 <component is=""></component> // 组件中有个is属性，is属性指定哪个组件的名称，就会把相应的组件渲染到这个位置 // 也可以使用v-bind动态的指定这个属性的值 </template>

---

keep-alive组件

keep-alive是Vue.js的一个内置组件，他能够将不活动的组件保存在内存中，而不是将其直接销毁。它是一个抽象的组件，不会被渲染到真实的DOM中，也不会出现在父组件链中。keep-live主要用于保留组件状态或避免重新渲染。

动态组件 在组件切换(修改is属性)的时候， 之前的组件会被销毁掉，再次创建同名组件的时候又是一个新的组件。要在切换组件的时候保持当前组件的状态，可以使用keep-alive组件包裹，可以使得组件被切换了也不会被销毁

<!-- 在哪使用组件，就在哪包裹keep-alive --> <keep-alive> <component :is="comName"></component> </keep-alive>

keep-alive对应的生命周期函数

当组件被缓存(失活 )时，会自动触发组件的deactivated生命周期函数

当组件被激活时，会自动触发组件的activated生命周期函数

keep-alive的include属性

include属性用来 指定缓存 名称匹配的组件，属性值是 组件的名称。多个组件名之间使用英文逗号分隔

// 只有组件Left才会被keep-alive缓存 <keep-alive include="Left"> <component :id="comName"></component> </keep-alive>

此外，keep-alive还有一个exclude属性，用处与include相反，是除了被指定的组件外，其他的组件都缓存

注意： include和exclude属性不能同时使用

插槽slot

插槽vue为组件的封装者提供的能力，允许开发者在封装组件的时候，把不确定的、希望由用户指定的部分定义为插槽

``` // 定义插槽 使用

// 在使用Left组件的时候，在其中间插入代码时不会生效

这是在Left组件的内容区域，声明的p标签

// 解决办法-->在声明Left组件时，设置插槽slot

// 在Left组件中

Left组件

---

<!-- 声明一个默认插槽 -->
    <slot>我是一些默认值，当使用者没有传递具体结构时，我会显示</slot>

```

声明了插槽后，使用Left组件时，在Left标签内部写入的代码会被自动填充到Left组件中插槽的位置

---

具名插槽

vue官方规定：每一个slot插槽都要有一个name名称，设置了name名称的插槽就叫做 具名插槽

<slot name="one"></slot> <!-- 若省略了slot的name属性，则默认为default -->

---

v-slot指令

若要 指定某部分内容 填充到 指定的插槽中，要使用v-slot指令

语法：v-slot: 插槽的名称

注意：v-slot指令不能直接用在元素上，只能用在template标签上

```

App根组件

---

<div class="box">
  <!-- 在使用Left组件的时候 -->
  <Left>
    <!-- 将以下内容填充到名为one的插槽中 -->
    <template v-slot:one>
      <p>这是在Left组件的内容区域声明的p标签</p>
            </template>

    </Left>

</div>

```

注意点：

• v-slot: 还可以简写为一个井号 #
• 可以在slot标签内部写入内容 作为默认内容，当用户没有指定插槽的内容时就会展示默认内容

---

作用域插槽(插槽设置自定义属性)

在封装组件的时候，为slot标签提供属性对应的值(设置自定义属性)，这样的插槽就叫做 "作用域插槽"

当数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定的时候，就可以使用作用域插槽来实现

// 在Left组件中 <!-- 在content插槽中，设置msg属性并赋值 --> <slot name="content" msg="hello"></slot> <!-- 自定义属性msg的内容希望在使用组件的时候能被访问，相当于是子传父 -->

```

{{ obj }}

{{ obj.msg }}

```

如果使用的是默认插槽，则需要使用slot-scope属性来接收插槽传递的数据

<!-- 在默认插槽中，设置games属性并赋值 --> <slot game="minecraft"></slot>

<Left> <template slot-scope="obj"> <div> <p> {{ obj.game }} </p> <!-- 渲染得到minecraft--> </div> </template> </Left>

---

作用域插槽 除了可以直接设置自定义属性并赋值以外，还可以使用v-bind动态绑定属性值

```

```

---

作用域插槽的解构赋值

在使用插件，设置形参接收插槽预留的数据时，可以使用解构赋值来接收需要使用的数据

```

{{ obj }}

{{ msg }}

{{ user }}

```

​

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖