3. 组件化高级-插槽

1. 编译作用域

• 先来看一个实例代码：

• 上面的结果是，可以被渲染出来，也就是使用的是Vue 实例的属性。

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

• 我们在使用 cpn 的时候，整个组件的使用过程是相当于在父组件中出现的。
• 那么他的作用域急速父组件，使用的属性也是属于父组件的属性
• 因此，isShow 使用的是 Vue实例的属性，而不是子组件的属性。

2. 为什么使用 slot？& 如何封装这类组件呢？

• slot翻译为插槽：
  • 在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。
  • 插槽的目的是让我们原来的设备具备更多的扩展性。
  • 比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。
• 组件的插槽：
  • 组件的插槽也是为了让我们封装的组件更加具有扩展性。
  • 让使用者可以决定组件内部的一些内容到底展示什么。
• 栗子：移动网站中的导航栏。
  • 移动开发中，几乎每个页面都有导航栏。
  • 导航栏我们必然会封装成一个插件，比如nav-bar组件。
  • 一旦有了这个组件，我们就可以在多个页面中复用了。
• 但是，每个页面的导航是一样的吗？No，我以京东M站为例

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

3. slot 的基本使用

4. 具名插槽 slot

• 当子组件的功能复杂时，子组件的插槽可能并非是一个。
  • 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
  • 那么，外面在 给插槽插入内容时，如何区别插入的是哪一个呢？
  • 这个时候，我们就需要给插槽起一个名字
• 如何使用具名插槽呢？
  • 非常简单，只要给 slot 元素一个 name属性即可
  • <slot name='myslot'></slot>

• 如果没有使用具名插槽？

5. 作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供

• 先来看一个需求：

  • 子组件中包括一组数据，比如 pLanguages: ['JavaScript', 'Python', 'C/C++', 'Java', 'Go']
  • 需要在多个界面进行展示：
    • 某些界面是以水平方向一一展示的，
    • 某些界面是以列表形式展示的，
    • 某些界面直接展示一个数组
  • 内容在子组件，希望父组件告诉我们如何展示，How to do it?
    • 使用 slot 作用域插槽就可以了。

• 在父组件使用我们的子组件时，从子组件中拿到数据：

  • 我们通过 <template slot-scope="slotProps"> 拿到 slotProps 属性
  • 再通过 slotProps.abc 就可以获取到刚才我们传入的 abc 了

<div id="app">
  <!-- 作用域插槽 获取子组件中的pLanguages-->
  <!-- 1. 横杠- 拼接 水平展示-->
  <cpn>
    <!-- 2.5.x以下必须使用template 模板 -->
    <template slot-scope="slotProps">
      <span>{{slotProps.abc.join(' - ')}}</span>
    </template>
  </cpn>
  <!-- 2. 默认列表展示 -->
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <slot :abc="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'Python', 'C/C++', 'Java', 'Go']
          }
        }
      }
    }
  })
</script>