浅谈：VUE 插槽 slot

使用场景

多个场景中，模块大同小异，使用模块做组件化，不同的位置，组件中使用插槽solt

分类	解析	标签	备注
单个插槽	当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。	除非子组件模板包含至少一个 插口，否则父组件的内容将会被丢弃。	slot标签是没有name属性去标记的
具名插槽	元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。	仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。	主要是根据name插入对应的slot标签内
作用域插槽	让插槽内容能够访问子组件中才有的数据,将 父组件数据作为 元素的一个特性绑定上去；绑定在 元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字	类型使用template重渲染数据	自vue 2.6.0 起有所更新。已废弃的使用 slot-scope 特性。

代码段

单个插槽

//子组件

<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

//父组件 

<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

//渲染结果

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>    //插入两个p标签内容， 子组件的默认内容被覆盖
    <p>这是更多的初始内容</p>
  </div>
</div>

具名插槽

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

//父组件
<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>

  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>

  <p slot="footer">这里有一些联系信息</p>
</app-layout>

//渲染结果

<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
 </div>
 //根据slot 的name属性，插入对应slot

作用域插槽

//子组件
<span>
  <slot>{{ user.lastName }}</slot>
</span>

//父组件
<comp-user>
  {{ user.firstName }}
</comp-user>
//从代码来看，和单个插槽没什么区别，notice:单个插槽直接插入片段，没有变量，here:user,所以不会正常显示
//修正代码：
//子组件
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

//父组件
<comp-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</comp-user>
//desc:父组件控制重新显示子组件的属性值

参考资料：https://cn.vuejs.org/v2/guide/components-slots.html
https://www.jianshu.com/p/31674b727954

加入我的技术群，一起学习

707196135