vue组件中插槽slot的基本使用

1. 概念

slot 翻译为插槽

为什么使用slot？

• 组件的插槽也是为了让我们封装的组件预留一些空间，更加具有扩展性。
• 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。

---

2. slot 的基本使用

• 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
• 在子组件中，使用特殊的元素 <slot> 就可以为子组件开启一个插槽。
• <slot></slot> 中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容

<div id="app">
  <cpn></cpn>
  <cpn>
    <h3>啦啦啦啦</h3>
  </cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是组件的标题</h2>
    <slot>
      <p>我是组件的默认内容</p>
    </slot>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
     
     
    el: "#app",
    data: {
     
     },
    components: {
     
     
      cpn: {
     
     
        template: '#cpn'
      }
    }
  });
</script>

---

3. 具名插槽

当子组件的功能复杂时，子组件的插槽可能并非是一个。

• 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
• 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
• 这个时候，我们就需要给插槽起一个名字

如何使用具名插槽呢？非常简单，只要给 slot 元素一个 name 属性即可<slot name='myslot'></slot>，一个不带 name 的 <slot> 出口会带有隐含的名字 “default”

vue官网 - 具名插槽

具名插槽自 2.6.0 起有所更新，vue官网推荐使用 v-slot 指令。官网截图：

<template id="cpn">
  <div>
    <slot name="header">我是页面默认头部</slot>
    <slot></slot>
    <slot name="footer">我是页面默认底部</slot>
  </div>
</template>

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<div id="app">
  <cpn>
    <template v-slot:header>
      <h1>页面头部标题</h1>
    </template>

    <p>页面中间内容</p>

    <template v-slot:footer>
      <h1>页面底部标题</h1>
    </template>
  </cpn>
</div>

注意 v-slot 只能添加在 <template> 上 (只有一种例外情况)

具名插槽的缩写

2.6.0 新增

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

---

4. 作用域插槽

vue官网 - 作用域插槽