[JavaScript知识库]vue中组件插槽详解

组件插槽

目标: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容

<slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地显示?

1 组件进阶 - 具名插槽

目标: 当一个组件内有2处以上需要外部传入标签的地方

语法口诀:

1. 组件内用<slot></slot>占位

2. 使用组件时<Pannel></Pannel>夹着的地方, 传入标签替换slot

传入的标签可以分别派发给不同的slot位置

子组件内 通过<slot></slot>占位

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <slot name="title"></slot>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
     <slot name="content"></slot>
    </div>
  </div>
</template>

父组件内使用

<template>
  <div id="container">
    <div id="app">
      <Pannel>
        <template #title>
          <span style="color: red;">我是标题</span>
        </template>
        <template #content>
          <p>寒雨连江夜入吴,</p>
          <p>平明送客楚山孤。</p>
          <p>洛阳亲友如相问，</p>
          <p>一片冰心在玉壶。</p>
        </template>
      </Pannel>
    </div>
  </div>
</template>

v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#

总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

?

2 组件进阶 - 作用域插槽(有点难以理解耐心看完)

目标: 子组件里值, 在给插槽赋值时在父组件环境下使用

口诀:

1. 子组件, 在slot上绑定属性和子组件内的值

2. 父组件使用子组件, 传入自定义标签, 用template和v-slot="自定义变量名"

3. scope变量名自动绑定slot上所有属性和值

?<slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地显示?

?子组件在slot上绑定属性和组件内的值

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
     <slot :row="defaultObj">{{ defaultObj.defaultOne }}</slot>
    </div>
  </div>
</template>

<script>
// 目标: 作用域插槽
// 场景: 使用插槽, 使用组件内的变量
// 1. slot标签, 自定义属性和内变量关联
// 2. 使用组件, template配合v-slot="变量名"
// 变量名会收集slot身上属性和值形成对象
export default {
  data() {
    return {
      isShow: false,
      defaultObj: {
        defaultOne: "无名氏",
        defaultTwo: "小传同学"
      }
    };
  },
};
</script>

在这里你可以理解为 子组件 在<slot></slot> 上 包装了一个row.defaultObj的属性 所有使用这个组件的父组件都可以拿到这个属性

父组件上定义变量??v-slot="自定义变量名"?

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
        <!-- 需求: 插槽时, 使用组件内变量 -->
        <!-- scope变量: {row: defaultObj} -->
        <template v-slot="scope">
          <p>{{ scope.row.defaultTwo }}</p>
        </template>
      </Pannel>
    </div>
  </div>
</template>

<script>
import Pannel from "../components/05/Pannel";
export default {
  components: {
    Pannel,
  },
};
</script>

这里你可以理解为在这里通过template 与v-slot="scope" 让scope拿到了子组件上的row的所有属性?

就是相对于子组件向外暴露了自己的所有 每个使用子组件的父组件都可以通过 template 与v-slot="scope" 来获取子组件内的数据

一般使用表单或表格循环渲染数据时 我们需要拿到特定的子组件某些数据 就可以通过作用域插槽通过点击事件获取 切莫与父子组件传值混淆?

?总结: 组件内变量绑定在slot上, 然后使用组件v-slot="变量" 变量上就会绑定slot身上属性和值

总结: 插槽可以自定义标签, 作用域插槽可以把组件内的值取出来自定义内容 ?

具名插槽 v-slot: 简写 # 改变结构

作用域插槽 v-slot="slot" 改变值