vue插槽slot （默认插槽 具名插槽 作用域插槽）

• 插槽分发内容
• 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如HTML、组件等，填充的内容会替换子组件的标签
• 以下的所有内容是基于vue版本 2.6.0 起

默认插槽
在一个 组件中：

<div class="item">
  <slot>默认内容</slot>
</div>

父组件

<cardItem>
 提供的内容
</cardItem>

具名插槽

元素有一个特殊的 属性：name。属性用来定义额外的插槽

<template>
  <div class="container">
    <div class="header">
      <slot name="header">标题</slot>
    </div>
      <slot>主要内容放这里</slot>
    <div class="footer">
      <slot name="footer">底部</slot>
    </div>
  </div>
</template>

不带 name 的 出口会带有隐含的名字“default”。 父组件在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

<myslot>
   <template v-slot:header>
      <div >标题内容</div >
   </template>
   <div>主要内容1</div >
   <template v-slot:footer>
     <div>底部内容</div >
   </template>
</myslot>

作用域插槽

• 父组件对子组件的内容进行加工处理
• 父级模板里的所有内容都是在父级作用域中编译的；
• 子模板里的所有内容都是在子作用域中编译的
• 为了让 user在父级的插槽内容中可用，我们可以将user 作为 元素的一个 attribute 绑定上去

 <template>
  <div>
    <span>
      <slot v-bind:user="user">{{user.name}}</slot>
    </span>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        user:{
          name:'123',
        }
      }
    }
  }
</script>

父组件

<template>
  <myslot v-slot:default="slotProps">
     {{ slotProps.user.name}}
  </myslot>
  //or 写法上可以采用默认插槽的缩写语法
   <myslot v-slot="slotProps">
     {{ slotProps.user.name}}
  </myslot>
</template>
<script>
  import myslot from './myslot';
  export default {
    components: {
      myslot
    }
</script>
<style>
</style>

注意: 默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：

多个插槽的情况 子组件

<template>
  <div>
    <span>
      <slot v-bind:userData="user" name="header">
        {{ user.name }}
      </slot>
      <slot v-bind:hobbyData="hobby" name="footer">
        {{ hobby.name }}
      </slot>
    </span>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        user:{
          name: '1234',
        },
        hobby:{
          tel: "6789",
        }
      }
    }
  }
</script>
<style>
</style>

父组件

<template>
  <myslot>
      <template v-slot:header="slotProps">
        {{ slotProps.userData.name }}
      </template>
      <template v-slot:footer="slotProps">
        {{ slotProps.hobbyData.tel}}
      </template>
  </myslot>
</template>

<script>
  import myslot from './myslot';
  export default {
    components: {
      myslot
    }
</script>
<style>
</style>

针对多个插槽的情况，在写法上可以解构插槽prop，父组件的写法如下

<template>
  <myslot>
      <template v-slot:header="{userData}">
        {{ userData.name}}
      </template>
      <template v-slot:footer="{hobbyData}">
        {{ hobbyData.tel }}
      </template>
  </myslot>
</template>

<script>
  import myslot from './myslot';
  export default {
    components: {
      myslot
    }
  }
</script>
<style>
</style>

参考:http://caibaojian.com/vue-slot.html