vue插槽 slot

插槽（slot）是vue组件的封装在提供的能力，允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。通俗的说，插槽就是起到一个占位的作用，使用者通过插槽名，将内容放到子组件的对应位置。

 默认插槽

如果在声明插槽区域的时候，没有给slot指明name名称，那么该插槽会有一个名称叫做 default，该插槽叫做默认插槽。

<!-- 在子组件中声明一个默认插槽 -->
    <slot></slot>

 <HelloWorld>
      <!-- 使用默认插槽 -->
      <div>这里的内容会显示在 HelloWorld 组件的默认插槽中</div>
    </HelloWorld>

具名插槽

在声明插槽的时候，为slot加上name名称，那么该插槽就叫做具名插槽。在使用具名插槽的时候在v-slot:后加上对应插槽的名称，注意v-slot不能直接用在元素身上，必须在template上。

• v-slot可以简写成 #
• template是一个虚拟标签，只起到包裹性质的作用，不会被渲染成任何html元素

    <!-- 声明一个具名插槽 -->
    <slot name="content"></slot>

    <HelloWorld>
      <!-- 使用具名插槽 -->
      <template #content>
        <div>这里的内容会显示在 HelloWorld 组件中名为 content 的插槽中</div>
      </template>
    </HelloWorld>

作用域插槽

作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。简单来说，作用域插槽就是让插槽内容可以访问到子组件中的数据。

 <!-- 声明一个作用域插槽 -->
    <slot name="content" :msg="content"></slot>

    <HelloWorld>
      <!-- 使用作用域插槽 -->
      <template #content="scope">
        <div>{{ scope.msg }}</div>
      </template>
    </HelloWorld>

后备内容

封装组件时，可以为预留的slot插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。

  <slot name="content">这里是后备内容，使用插槽时没有提供内容，会生效</slot>

动态组件

动态组件值得是动态切换组件的显示与隐藏。

<component :is="comName"></component>

• component 标签是 vue 内置的，作用：组件的占位符
• is 属性的值表示要渲染的组件的名字 

<template>
  <div id="app">
    <button @click="comName='Move1'">Move1组件</button>
    <button @click="comName='Move2'">Move2组件</button>
    <button @click="comName='Move3'">Move3组件</button>
    <div class="box">
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import Move1 from '@/components/Move1.vue'
import Move2 from '@/components/Move2.vue'
import Move3 from '@/components/Move3.vue'
export default {
  name: 'App',
  data() {
    return {
      comName: 'Move1'
    }
  },
  components: {
    Move1,
    Move2,
    Move3
  }
}
</script>

<style lang="less">
</style>

keep-alive

keep-alive 可以把内部的组件进行缓存，而不是销毁组件。

• 当组件第一次被创建的时候，既会执行created生命周期，也会触发actived 生命周期
• 当组件被激活的时候，只会触发actived生命周期，不再触发created。因为组件没有被重新创建

<keep-alive>
        <component :is="comName"></component>
</keep-alive>

keep-alive 的include 属性

include属性用来指定名称匹配的组件被缓存。多个组件名之间使用英文的逗号隔开。

也可以通过exclude 属性指定哪些组件不需要被缓存

注意：include和exclude不要同使用

     <keep-alive include="Move1,Move2">
        <component :is="comName"></component>
      </keep-alive>

 你要自己发光，而不是折射别人的光芒！