重学React基础知识整理——组件间的另类通信“插槽”（五）

埃尔斯（aiers）

已于 2024-06-05 17:32:17 修改

阅读量590

点赞数 1

分类专栏：前端博客重学React 文章标签： react.js javascript 前端

于 2022-06-01 16:51:49 首次发布

本文链接：https://blog.csdn.net/weixin_40766882/article/details/125086473

版权

前端博客同时被 2 个专栏收录

25 篇文章 2 订阅

订阅专栏

重学React

7 篇文章 0 订阅

订阅专栏

什么是插槽

slot是HTML <slot> 元素， 是 Web 组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充，这样您就可以创建单独的 DOM 树，并将它与其它的组件组合在一起。这个是官方解释看起来很晦涩，用人话说的意思是“Slot插槽是个占位符（就是一个占位置的），它可以和其它组件一起合用，就是他是可以复用，比如一个模态框组件我在底部按钮那里加了个插槽，如果别人引用那个组件，不修改那底部按钮就按组件里设置的使用，如果加上slot的name就是启用插槽对底部按钮进行修改，你可以去掉按钮或者修改按钮的个数都全凭君意”。

template是什么？

各位是不是很奇怪我们说插槽为什么讲template，是不是要说埃尔斯在挂羊头卖狗肉，各位稍安勿躁，听我娓娓道来。在HTML中solt一般与template合用，做成一个个可以复用的组件。

1、<template> 标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器。如果您有一些需要重复使用的 HTML 代码，则可以使用 <template> 标记。也就是说<template>包裹的内容是隐藏的在浏览器中不会渲染出来

2、<template> 中的内容可以稍后使用 JavaScript 呈现。也就是说让<template>包裹的内容在浏览器中渲染需要使用js去创造一个dom节点去挂载到HTML中任意一处dom下就能看得到<template>里的内容了。

一个完整的是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>
</head>
<body>
    <template id="element-details-template">
        <style>
          details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif }
          .name {font-weight: bold; color: #217ac0; font-size: 120% }
          h4 {
            margin: 10px 0 -8px 0;
            background: #217ac0;
            color: white;
            padding: 2px 6px;
            border: 1px solid #cee9f9;
            border-radius: 4px;
          }
          .attributes { margin-left: 22px; font-size: 90% }
          .attributes p { margin-left: 16px; font-style: italic }
        </style>
        <details>
          <summary>
            <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>
            <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
          </summary>
          <div class="attributes">
            <h4>Attributes</h4>
            <slot name="attributes"><p>None</p></slot>
          </div>
        </details>
        <hr>
      </template>
      <element-details>
         <!-- 下面没有加slot的内容p标签在浏览器中渲染不出来 -->
        <p>默认模板----</p>
      </element-details>
      <element-details>
        <!-- 下面没有加slot的内容在浏览器中渲染不出来 -->
        <p>wdfwerwer</p>修改传递下来数据---
        <a slot="attributes"><p>wwwe334ee</p></a>
      </element-details>
      
</body>
<script>
    customElements.define('element-details',
        class extends HTMLElement {
            constructor() {
            super();
            var template = document
                .getElementById('element-details-template')
                .content;
            const shadowRoot = this.attachShadow({mode: 'open'})
                .appendChild(template.cloneNode(true));
        }
        })
</script>
</html>

运行结果如下所示：

第一个是默认的模板组件显示，没有任何改变渲染出来。
第二个是改了attributes的slot内容，显示了我修改的内容。
在引用的时候组件里包裹的没有加slot属性的内容没有被渲染出来，如我在代码的注释里所描述的一样。
现在说完执行完的结果我们来聊聊组件里<template>里的事，这里面到底干了啥？

1）<template>里的内容没有被js创造成element-details组件前是没有渲染的，不然就会生成三块内容，而不是两块。

2）<template>里有<h4>``<i>等标签和<slot>标签，进行混用，也就是说<slot>标签可以和其他标签混用生成业务组件。

3）<template>]用<slot>标签和<slot>标签的属性生成一个命名的槽 (named slots)：

 <slot name="element-name">
 <slot name="description">
 <slot name="attributes">

<template> 包裹命名的槽 (named slots) 在 <element-details> 元素中。
4）我们要引用组件和修改插槽里的数据，只要在标签中将相应的插槽名赋值slot属性就行了如上面代码所示的，将attributes赋值给slot

<element-details>
        <!-- 下面没有加slot的内容在浏览器中渲染不出来 -->
        <p>wdfwerwer</p>修改传递下来数据---
         <!-- 下面将插槽名赋值给slot的属性内容在浏览器中能渲染出来 -->
        <a slot="attributes"><p>wwwe334ee</p></a>
      </element-details>

在vue中插槽是怎么使用的？

在vue中使用插槽有两种半方式。

1、直接像web component里一样使用`<slot>`标签包裹。

建立一个<FancyButton>的组件，它的模板代码如下：

<button class="fancy-btn">
  <slot></slot> <!-- 插槽插口 -->
</button>

这个和web component里一样，有一个<slot>标签，这里<slot> 元素是一个插槽的插口，标示了父元素提供的插槽内容将在哪里被渲染。
这里要引用这个FancyButton组件实现这个插槽作用的代码如下所示：

<FancyButton>
  Click me! <!-- 插槽内容 -->
</FancyButton>

这段代码作用如下图所示：

最终渲染出的 DOM 是这样：

<button class="fancy-btn">
  Click me!
</button>

插槽内容还可以是任意合法的模板内容。例如我们可以传入多个元素，甚至是组件，就是我们想插什么内容都可以。

1.5 具名插槽。

表现形式代码如下：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

这里的name=“header”,name="footer"就是具名的slot.

使用 JavaScript 函数可能更有助于你来理解具名插槽：

// 传入不同的内容给不同名字的插槽
BaseLayout({
  header: `...`,
  default: `...`,
  footer: `...`
})

// <BaseLayout> 渲染插槽内容到对应位置
function BaseLayout(slots) {
  return (
    `<div class="container">
      <header>${slots.header}</header>
      <main>${slots.default}</main>
      <footer>${slots.footer}</footer>
    </div>`
  )
}

2、v-slot实现插槽功能，它的缩写为#。表示具名插槽或准备接收 prop 的插槽。

代码如下：

   <!-- 具名插槽 -->
   <BaseLayout>
     <template v-slot:header>
       Header content
     </template>

     <template v-slot:default>
       Default slot content
     </template>

     <template v-slot:footer>
       Footer content
     </template>
   </BaseLayout>

   <!-- 接收 prop 的具名插槽 -->
   <InfiniteScroll>
     <template v-slot:item="slotProps">
       <div class="item">
         {{ slotProps.item.text }}
       </div>
     </template>
   </InfiniteScroll>

   <!-- 接收 prop 的默认插槽，并解构 -->
   <Mouse v-slot="{ x, y }">
     Mouse position: {{ x }}, {{ y }}
   </Mouse>

在React中插槽是怎么使用的？

在普通web组件中和vue中的使用都已介绍，在React中呢，又该怎么样呢？
在我们React中组件里直接包裹一些html标签，html标签里的内容会不会显示呢？来我们来上代码：

import React, { Component } from 'react'

export default class MySlot extends Component {
  render() {
    return (
      <div>
        <div>MySlot--Parent</div>
        <Child>
           <p>111111</p> 
        </Child>
      </div>
    )
  }
}

class Child extends Component {
    render() {
      return (
        <div>Child</div>
      )
    }
  }

上面代码运行结果如下图所示：

由此可见<p>111111</p>并没有渲染出来。那么我们要使它渲染出来，得怎么修改呢？欲知后事如何请听下回。。。别急，我现在道来。组件中props有一个固定的children属性去在Child组件中占一个位，做成插槽。代码如下所示：

import React, { Component } from 'react'

export default class MySlot extends Component {
  render() {
    return (
      <div>
        <div>MySlot--Parent</div>
        <Child>
           <p>111111</p> 
        </Child>
      </div>
    )
  }
}

class Child extends Component {
    render() {
      return (
        <div>
            <div>Child</div>
            {/* vue中有slot这个标签去表示插槽，React中是props属性中固定的children属性表示 */}
            <div>{this.props.children}</div>
        </div>
      )
    }
  }

运行结果：

由此11111给渲染出来了。

那如果父组件中传递的html比较多呢又会有什么样的效果呢，上代码：

import React, { Component } from 'react'

export default class MySlot extends Component {
  render() {
    return (
      <div>
        <div>MySlot--Parent</div>
        <Child>
           <div><p>111111</p> </div>
           <div><h2>222222</h2> </div>
           <div><i>333333</i> </div>
        </Child>
      </div>
    )
  }
}

class Child extends Component {
    render() {
        console.log('this.props.children',this.props.children)
      return (
        <div>
            <div>Child</div>
            {/* vue中有slot这个标签去表示插槽，React中是props属性中固定的children属性表示 */}
            <h1>this.props.children获取的是一个父组件传递过来的全部dom</h1>
            <div>{this.props.children}</div>
            <h1>类似于vue中的具名插槽显示</h1>
            <div>{this.props.children[0]}</div>
            <div>{this.props.children[2]}</div>
            <div>{this.props.children[2]}</div>
            <div>{this.props.children[1]}</div>
        </div>
      )
    }
  }

上述代码渲染结果如下所示：

由上图结果可知：

1）this.props.children 获取的是父组件传递过来的整个dom生成的数组,并每个并列的html元素是其的一个元素，上面代码是传递了3个div包裹的元素，所以this.props.children生成了也length为3的数组。
2）在页面中的展示顺序是和Child中this.props.children的数组下标有关和父组件传递过来的顺序没关。

至此插槽的相关知识也总结的七七八八了，我就抛砖引玉了，欢迎各位大佬莅临指导。