Vue 插槽的介绍与使用本文已参与「新人创作礼」活动，一起开启掘金创作之路。插槽组件的插槽是为了让我们封装的组件更

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

插槽

组件的插槽是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。
例子：
- 移动网页中的导航栏：
  - 移动开发中，几乎每个页面都有导航栏。
  - 导航栏我们必然会封装成一个插件，比如 nav-bar 组件。
  - 一旦有了这个组件，我们就可以在多个页面中复用了。

如何封装这类组件呢？slot

如何去封装这类的组件呢？
- 他们有很多区别，但是也有很多共性。
- 如果每一个单独封装一个组件，显然不合适，比如每个页面都返回，这部分内容我们就要重复去封装。
- 但是如果封装成一个，也不合理：有些左面是菜单，有些是返回，有些中间是搜索，有些是文字等等。
如何封装合适呢？抽取共性，保留不同。
- 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
- 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。
- 是搜索框，还是文字，还是菜单，由调用者自己来决定。
这就是为什么我们要学习组件中的插槽 slot 的原因。

slot 基本使用

在子组件中，使用特殊元素就可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。
中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容。

插槽的使用方法：

<div id="app">
  <my-cpn>
    <h2>
      我是替换插槽的内容
    </h2>
    <p>
      我也是替换插槽的内容
    </p>
  </my-cpn>
</div>

<template id="myCpn">
	<div>
    <slot>我是插槽中的默认内容</slot>
  </div>
</template>
<script>
	Vue.component('my-cpn',{
    template:'#myCpn'
  })
  
  let app = new Vue({
    el: '#app'
  })
</script>

具名插槽

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

如何使用具名插槽呢？

非常简单，只要给 slot 元素一个 name 属性即可。

<div>
  <!-- 没有传入任何内容 -->
  <my-cpn></my-cpn>
  <!-- 传入某一个内容 -->
  <my-cpn>
  	<span slot="left"></span>
  </my-cpn>
  <!-- 传入所有的内容 -->
  <my-cpn>
  	<span slot="left">我是返回</span>
    <span slot="center">我是标题</span>
    <span slot="right">我是菜单</span>
  </my-cpn>
</div>

<template id="myCpn">
	<div>
    <slot name="left">我是左侧</slot>
    <slot name="center">我是中间</slot>
    <slot name="right">我是右侧</slot>
  </div>
</template>

<script>
	Vue.component('my-cpn',{
    template: '#myCpn'
  })
  
  let app = new Vue({
    el: '#app'
  })
</script>

作用域插槽

编译作用域

在学习插槽以前，先理解一个概念：编译作用域。

官方对于编译的作用域解析比较简单。

<div id="app">
	<cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
    <div>
        <h2>我是组件标题</h2>
        <p>哈哈哈</p>
    </div>
</template>
<script src="../Vuecode/Vue.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        isShow: false
                    }
                }
            }
        }
    })
</script>

下面的代码是否可以被渲染出来？

中，使用了 isShow 属性。
isShow 属性即包含在组件中，又包含在 Vue 实例中。

答案：最终是可以渲染出来的，也就是使用的是 Vue 实例的属性。

为什么呢？

官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
而我们在使用的时候，整个组建的使用过程是相当于在父组件中出现的。
那么他的作用域就是父组件，使用的属性也是属于父组件的属性。
因此，isShow 使用的是 Vue 实例的属性，而不是子组件的属性。

作用域插槽：准备

父组件替换插槽的标签，但是内容由子组件来提供。
先来提一个需求：
- 子组件中包括一组数据，比如：pLanguages:['JavaScript','Python','Swift','Go','C++']。
- 需要在多个界面进行展示。
  - 某些界面是以水平方向——展示的。
  - 某些界面是以列表形式展示的。
  - 某些界面直接展示一个数组。
- 内容在子组件，怎么让父组件进行展示？
  - 利用 slot 作用域插槽就可以了。

作用域插槽的使用

<div id="app">
    <cpn></cpn>
    <cpn>
      <template slot-scope="slot">
        <span>{{slot.data.join(' - ')}}</span>
      </template>
    </cpn>
    <cpn>
      <template slot-scope="slot">
        <span>{{slot.data.join(' * ')}}</span>
      </template>
    </cpn>
  </div>
  <template id="cpn">
    <div>
      <slot :data="pLanguages">
        <ul>
          <li v-for="item in pLanguages">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
            }
          }
        }
      }
    })
  </script>