vue slot

作用：子template中 定义 给 父template 更改页面的插槽,
注: vue2.6

child

 <template>
  <div>
      <slot name='head'></slot> <!--具名插槽-->
    <slot></slot>
  </div>
</template>
<script>
export default{
  name:'slotDemo'
}
</script>

father

<template>
  <div>
      <SlotDemo>
            <template v-solt = ''head"> <h1>This is slot head</h1> </template>
            <template v-solt="default"> <h1>This is slot default</h1> </template>
      </SlotDemo>
   </div>
</template>
<script>
   import SlotDemo  from "./soltDemo"
export default {
  components: { SlotDemo  }
}

合成后：

 <template>
  <div>
      <h1>This is slot head</h1>
    <h1>This is slot default</h1> 
  </div>
</template>

作用域 插槽

可以让父组件 调用 子组件的数据

child

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个特性绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

father

绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字：

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