Vue中的插槽

作者: 杰哥课堂 | 来源:发表于2021-06-16 11:37 被阅读0次

vue中的slot（插槽）
（十八）补充-Vue3中插槽的使用
18、Vue3 作用域插槽
2020-07-23 一次性讲明白vue插槽slot
vue插槽slot
vue 插槽的使用
详解vue中的插槽
Vue之深入理解插槽—slot, slot-scope, v-s
vue插槽
vue jsx使用插槽

1 概述

1) 什么是slot

slot可以理解为预留了一个可替换的地方

image-20210616085647899

游戏卡是可以插拔的, 插游戏卡的地方就是一个插槽

image-20210616085722989

思考

游戏卡插槽有什么作用?

再比如, USB接口也可以看成一个插槽. 可以插入U盘, 硬盘, 鼠标, 键盘...

image-20210616090238233

还有, CPU槽, 内存槽. 他们的存在有什么共同点??

2) 为什么需要slot

通过上面的例子, 我们可以看出

通过插不同的游戏卡, 可以玩不同的游戏
通过插不同的外设, 可以扩展电脑的功能
通过插不同型号的CPU(i3/i5/i7/i9), 可以更换CPU

所以, 插槽最主要的作用是提供扩展性.

3) Vue中的slot

在Vue开发中, slot主要应用在组件开发中, 通过在组件中预留slot, 实现不同的功能

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <son></son>
    </div>

    <template id="tmp">
      <div>我是子组件</div>
    </template>

    <script>
      const vm = new Vue({
        el: '#app',
        components: {
          son: {
            template: '#tmp',
          },
        },
      })
    </script>
  </body>
</html>

子组件的模板编译后, 会替换<son>所在的地方

image-20210616092528925

但是, 不管在<son>中添加任何内容, 都不起作用~

<div id="app">
  <son>
    <!-- 在子组件里写的内容不会生效 -->
    <h2>我是子组件的标题</h2>
  </son>
</div>

这样, 子组件的可扩展性就很不好. 如果希望子组件中的内容可以替换怎么办??

在子组件中预留一个插槽, 通过给子组件传递不同的内容来改变子组件

image-20210616093516453

2 具名插槽

1) 作用

如果需要同时使用多个插槽, 就需要给插槽取名字.

就好比: 主板上同时有CPU槽和内存槽, 如何区分这两个插槽, 不至于把内存插到CPU中

当然, 现实中肯定不会, 但是程序中就需要使用名字区分开

2) 使用

在子组件中, 定义具名插槽
在引用子组件时, 通过slot属性指定要替换的插槽

<div id="app">
  <son>
    <div slot="cpu">我是CPU</div>
    <div slot="memery">我是内存</div>
  </son>
</div>

<template id="tmp">
  <div>
    <slot name="cpu"></slot>
    <slot name="memery"></slot>
  </div>
</template>

没有指定的内容会全部放到<slot>中, 也就是默认插槽

<div id="app">
  <son>
    <div slot="cpu">我是CPU</div>
    <div slot="memery">我是内存</div>
    <hr />
    <div>我是剩余的内容</div>
    <p>我也是...</p>
  </son>
</div>

<template id="tmp">
  <div>
    <slot name="cpu"></slot>
    <slot name="memery"></slot>
    <!-- slot其实也有名字, 名字是default -->
    <slot></slot>
    <slot name="default"></slot>
  </div>
</template>

3 作用域插槽

1) 编译作用域

在Vue编译的过程中, 如果父子组件中定义的相同的状态, 会不会冲突呢?

如果不会冲突, 具体访问的是哪个状态呢

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <button v-show="isShow">按钮</button>
      <son></son>
    </div>

    <template id="tmp">
      <div>
        <h3>我是子组件</h3>
        <button v-show="isShow">子组件按钮</button>
      </div>
    </template>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          isShow: false,
        },
        components: {
          son: {
            template: '#tmp',
            data() {
              return {
                isShow: true,
              }
            },
          },
        },
      })
    </script>
  </body>
</html>

父组件和子组件中都存在isShow.

如果在父模板中使用isShow, 访问的是父组件data中的值
如果在子模板中使用isShow, 访问的是子组件data中的值

通过上述示例, 我们可以发现, 在父组件中是不能直接访问子组件中的状态的.

需求

在父模板中可定制子组件的内容
同时使用子组件中的数据

2) 为什么需要作用域插槽

为了解决上述问题, 引入了作用域插槽的概念, 其核心是在父模板中访问子组件的数据

示例

<div id="app">
  <button v-show="isShow">按钮</button>
  <!-- 通过v-slot指令找名字为default的插槽, 并指定prop对象对应default插槽 -->
  <son v-slot:default="prop">
    <!-- 通过prop对象访问show属性, 相当于访问了子组件的isShow -->
    <button v-show="prop.show">子组件按钮</button>
  </son>
</div>

<template id="tmp">
  <div>
    <h3>我是子组件</h3>
    <!-- 在slot:default对象中, 定义自定义属性show -->
    <slot :show="isShow"></slot>
  </div>
</template>

其中, v-slot可以使用#简写

<!-- 通过v-slot指令找名字为default的插槽, 并指定prop对象对应default插槽 -->
<son #default="prop">
  <!-- 通过prop对象访问show属性, 相当于访问了子组件的isShow -->
  <button v-show="prop.show">子组件按钮</button>
</son>

通过同时有多个插槽, 需要借用<template>语法

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <button v-show="isShow">按钮</button>
      <!-- 通过v-slot指令找名字为default的插槽, 并指定prop对象对应default插槽 -->
      <son>
        <template #default="prop">
          <!-- 通过prop对象访问show属性, 相当于访问了子组件的isShow -->
          <button v-show="prop.show">子组件按钮</button>
        </template>
        <template #left="left">
          <h3>{{left.info.name}}</h3>
        </template>
      </son>
    </div>

    <template id="tmp">
      <div>
        <h3>我是子组件</h3>
        <!-- 在slot:default对象中, 定义自定义属性show -->
        <slot :show="isShow"></slot>
        <slot name="left" :info="stu"></slot>
      </div>
    </template>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          isShow: false,
        },
        components: {
          son: {
            template: '#tmp',
            data() {
              return {
                isShow: true,
                stu: {
                  name: 'xiaoming',
                  age: 18,
                },
              }
            },
          },
        },
      })
    </script>
  </body>
</html>