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

1.编译作用域

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

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

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

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

<pop-cart class="pop-cart" >pop-cart>

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

以下会被覆盖

      <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

<template>
<div>
    <slot name="header">slot>
    <slot>slot>
    <slot name="footer">slot>
 
div>
template>

<blog-post>
  <template v-slot:header>
    <h1>About Meh1>
  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 Youp>
  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.作用域插槽

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

当前插槽绑定数据

父组件中通过{{user}}进行获取和使用

  v-slot:default默认插槽

  v-slot:header具名插槽

实际应用场景：

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

<span>
  <slot :user="user">
    {{ user.lastName }}
  slot>
span>
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  template>
current-user>