插槽的使用

当我们想定义一个高度复用的组件，当你使用的时候可以往组件内插入不同的内容，这种情况需要使用插槽。
1.默认插槽

定义的组件
<template>
  <div>
    <header>头部</header>
    <main>
      <!-- 会接收使用组件插入的内容 slot就是插槽-->
        <slot></slot>
    </main>
    <footer>底部</footer>
  </div>
</template>
<script>
export default {
  name: 'com-test'
}
</script>

使用组件
<com-test>内容1</com-test>（内容1的东西会显示在slot标签内）

2.具名插槽
拥有name属性的插槽，使用场景：当多处内容需要插入的时候。

定义组件：
<template>
  <div>
    <header>头部</header>
    <main>
      <!-- 插入内容 -->
        <slot name="main"></slot>
    </main>
    <footer>
      <!-- 插入底部 -->
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
<script>
export default {
  name: 'com-test'
}
</script>
使用组件：
<com-test>
  <!-- 准备一个容器  装载需要插入的结构  指定插入到那个插槽 -->  
    <div slot="main"> 内容 </div>
  <div slot="footer"> 底部 </div>
</com-test>

3.作用域插槽
在插槽上绑定了数据，然后就可以在该插槽的插入内容中使用

封装组件：
<template>
  <div class='container-test'>
    <slot name="up" age="18" gender="女" :msg="msg"></slot>
    <h4>测试组件</h4>
    <slot name="down"></slot>
  </div>
</template>

<script>
export default {
  name: 'my-test',
  data () {
    return {
      msg: '组件内数据'
    }
  }
}
</script>
使用组件：
import MyTest from '@/components/my-test'
export default {
  // {MyTest:MyTest} 组件名称:组件配置对象
  // 按照规范：遵循驼峰命名，使用组件 小写 + - 方式
  components: { MyTest },
  }
      <my-test>
      <!-- slot="up" 指定插槽名称 -->
      <!-- slot-scope 指定插槽作用域数据（绑定在slot标签上的所有数据）名称 -->
      <!-- data 是变量名，规范变量名：scope 作用域插槽数据 -->
      <div slot="up" slot-scope="scope">上面内容 {{scope.age}}{{scope.gender}}{{scope.msg}}</div>
      <div slot="down">下面内容</div>
    </my-test>

补充：
在vue.js的2.6.0之后，以上写法 slot slot-scope 已经废弃，但是并没有移除，推荐了新的写法。建议使用v-slot 指令(只能在template标签或者组件中使用)来代替。

  <!-- v-slot:插槽名称="作用域插槽数据名称"  固定格式 -->
      <!-- v-slot can only be used on components or <template>. 只能在组件或template中使用 -->
      <template v-slot:up="scope">
        上面内容 {{scope.age}}{{scope.gender}}{{scope.msg}}
      </template>