Vue slot插槽内容分发

slot插槽使用

使用场景，一般父组件中又一大段模板内容需要运用到子组件上。或者更加复杂的，子组件需要运用到父组件大段模板内容，而子组件却不知道挂载的内容是什么。挂载点的内容是由父组件来决定的。

Slot的通俗理解

slot是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽也就是坑<slot name=”mySlot”>有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容；

// 父组件
<template>
  <div id="app">
    <div>头部</div>
    <div>
      <v-childe>
        <!-- 模板内容 -->
        <div>来自父组件模板内容</div>
        <div>这里的模板内容将会替换到子组件slot位置上</div>
        <div>{{message}}</div>
        <!-- 模板内容 -->
      </v-childe>
    </div>
    <div>底部</div>
  </div>
</template>
<script>
import Childe from './components/childe.vue'
export default {
 components:{
   'v-childe':Childe
 },
 data(){
   return{
     message:'动态数据'   //message的数据根据父组件来决定
   }
 }
}
</script>

注意：slot分发的内容，作用域在父组件上

//子组件
<template>
  <div>
    <div>子组件头部</div>
    <slot>
      <!-- 默认内容 -->
      <div>当父组件没有定义slot内容时，会默认显示</div>
      <!-- 默认内容 -->
    </slot>
    <div>子组件底部</div>
  </div>
</template>

注意：子组件内<slot>内的备用内容，他的作用域是子组件本身。

父组件的内容将会替换到子组件的slot位置上，因为没有指定名字，所以子组件无论添加多少个<slot></slot> 都是同样的内容。

 显示结果

//当父组件使用了slot时 （即<v-child> .... </v-chiild>里面有内容）
头部
子组件头部
来自父组件模板内容
这里的模板内容将会替换到子组件slot位置上
动态数据
子组件底部
底部

//当父组件没有使用slot时 （即<v-child></v-child>为空标签）
头部
子组件头部
当父组件没有定义slot内容时，会默认显示
子组件底部
底部

具名slot

为slot加上名字能分发更多内容

// 父组件
<template>
  <div id="app">
    <div>头部</div>
    <div>
      <v-childe>
        <!-- 模板内容 -->
        <div slot="top">
          <div>父组件插入名为top的slot内容</div>
        </div>
        <div slot="bottom">
          <div>父组件插入名为bottom的slot内容</div>
        </div>
　　　　　<div>动态数据</div>   //注意这里父组件没有使用slot的name特性，他将作为默认slot显示

        <!-- 模板内容 -->
      </v-childe>
    </div>
    <div>底部</div>
  </div>
</template>

//子组件
<template>
  <div>
    <div>子组件头部</div>
    <slot name="top">
      <!-- 默认内容 -->
      <div>当父组件没有定义slot内容时，会默认显示</div>
      <!-- 默认内容 -->
    </slot>
    <div>子组件底部</div>
  </div>
</template>

当父组件和子组件的slot名子一致的时候，才会显示父组件插入的内容。而名字不一致的内容则会抛弃

访问slot

在组件内，可通过 this.$slot.default  访问默认插入内容

　　　　　可通   this.$slot.+name 例如this.$slot.top  访问具名slot插入的内容