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>
