vue源码学习第六篇--插槽(slot)

我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。

以下文章来自掘金 作者：JH30K 链接：https://juejin.im/post/5ed61cd86fb9a047a43444d6

一、前言

vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容，那插槽是怎么使用的呢？它要解决什么场景的问题呢？ 我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。 注意：以下的所有内容是基于vue版本 2.6.0 起

二、插槽是什么

下面看一个例子 写一个父组件: test.vue

<template>
    <div>
      <div>大家好我是父组件</div>
      <myslot>
        <p>测试一下吧内容写在这里了能否显示</p>
      </myslot>
    </div>
</template>

<script>
  import myslot from './myslot';
  export default {
   
    components: {
   
      myslot
    }
  }
</script>

<style>
</style>

写一个子组件：myslot.vue

<template>
  <div>
      <div>我是子组件</div>
  </div>
</template>

<script>
</script>

<style>
</style>

运行代码，发现，最终渲染的效果是

大家好我是父组件
我是子组件

那如果我想实现显示父组件中p标签的内容怎么办 修改子组件：myslot.vue

<template>
  <div>
      <div>我是子组件</div>
      <p>现在测试一下slot</p>
      <slot></slot>
  </div>
</template>

<script>
</script>

<style>
</style>

运行代码，可以看到以下效果

大家好我是父组件
我是子组件
现在测试一下slot
测试一下吧内容写在这里了能否显示

官方文档对于插槽的应用场景是这样描述的: 我们经常需要向一个组件传递内容 Vue 自定义的 <slot> 元素让这变得非常简单 只要在需要的地方加入插槽就行了——就这么简单！ 结合上面的例子来理解就是这样的：

1. 父组件在引用子组件时希望向子组价传递模板内容<p>测试一下吧内容写在这里了能否显示</p>
2. 子组件让父组件传过来的模板内容在所在的位置显示
3. 子组件中的<slot>就是一个槽，可以接收父组件传过来的模板内容，<slot> 元素自身将被替换
4. <myslot></myslot>组件没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃

三、插槽的作用

让用户可以拓展组件，去更好地复用组件和对其做定制化处理

四、插槽的分类

1. 默认插槽

在一个 <submit-button> 组件中：

<button type="submit">
  <slot></slot>
</button>

我们可能希望这个 <button> 内绝大多数情况下都渲染文本“Submit”，但是有时候却希望渲染文本为别的东西，那怎么实现呢？ 我们可以将“Submit”作为后备内容，我们可以将它放在 <slot> 标签内：

<button type="submit">
  <slot>Submit</slot>
</button>

现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时：

<submit-button></submit-button>

后备内容“Submit”将会被渲染：

<button type="submit">
  Submit
</button>

但是如果我们提供内容：

<submit-button>
  Save
</submit-button>

则这个提供的内容将会被渲染从而取代后备内容：

<button type="submit">
  Save