插槽的基本使用和作用域插槽

1.编译作用域

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

即父子组件只能使用各自作用域的数据

2.插槽的后备内容（slot中默认配置内容）

可以在slot中提前设置一段内容作为默认值，当父组件提供插槽内容时将会被覆盖

html 复制代码

<!--父组件 -->
<pop-cart class="pop-cart" ></pop-cart>

html 复制代码

    <!--子组件-->
<slot name="cartPop">
      这是子组件插槽的默认内容
    </slot>

以下会被覆盖

html 复制代码

      <pop-cart ref="popCart" class="pop-cart" >
        <template v-slot:cartPop>
          这是父组件插槽内容
        </template>
      </pop-cart>

3.vm.$slots API 的形式获取子组件插槽内容

vm.$slots用来访问被插槽分发的内容。（在父组件中获取子组件的虚拟DOM）

插槽没有命名时：v-slot:default获取所有子组件插槽的实例。如：this. $refs.child.$ slots()

插槽有名字时：v-slot:name

html 复制代码

<template>
<!-- BlogPost.vue -->
<div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>

</div>
</template>

html 复制代码

<blog-post>
  <template v-slot:header>
    <h1>About Me</h1>
  </template>

  <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>

  <template v-slot:footer>
    <p>Copyright 2016 Evan You</p>
  </template>

  <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>

<script>
import Vue from 'vue'
Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header
    var body   = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header),
      createElement('main', body),
      createElement('footer', footer)
    ])
  }
})
</script>

4.作用域插槽

作用域插槽能够实现在父组件中获取子组件的数据

当前插槽绑定数据<slot :user="user" name="userCard">

父组件中通过<template v-slot:userCard="user">{{user}}</template>进行获取和使用

v-slot:default默认插槽

v-slot:header具名插槽

实际应用场景：

elementUI表格按钮中获取父组件中的数据，再传入按钮中

html 复制代码

<!-- 子组件 -->
<span>
  <slot :user="user">
    {{ user.lastName }}
  </slot>
</span>
<!-- 父组件中 -->
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>