插槽语法统筹
匿名插槽
<slot> 这就是默认值 </slot>
<ebutton> {{ child }}</ebutton>
具名插槽,#可替换为v-slot
<slot name= 'one'> 这就是默认值1</slot>
<ebutton>
<template #:one> 这是插入到one插槽的内容 </template>
</ebutton>
作用域插槽
通过slot 我们可以在父组件为子组件添加内容，通过给slot命名的方式，我们可以添加不止一个位置的内容。但是我们添加的数据都是父组件内的。上面我们说过不能直接使用子组件内的数据，但是我们是否有其他的方法，让我们能够使用子组件的数据呢？ 其实我们也可以使用v-slot的方式：
//子组件 ： (假设名为：ebutton)
<template>
<div class= 'button'>
<button> </button>
<slot name= 'one' :value1='child1'> 这就是默认值1</slot> //绑定child1的数据
<slot :value2='child2'> 这就是默认值2 </slot> //绑定child2的数据，这里我没有命名slot
</div>
</template>
new Vue({
el:'.button',
data:{
child1:'数据1',
child2:'数据2'
}
})
//父组件：（引用子组件 ebutton）
<template>
<div class= 'app'>
<ebutton>
// 通过v-slot的语法 将插槽 one 的值赋值给slotonevalue
<template #:one = 'slotonevalue'>
{{ slotonevalue.value1 }}
</template>
// 同上，由于子组件没有给slot命名，默认值就为default
<template #:default = 'slottwovalue'>
{{ slottwovalue.value2 }}
</template>
</ebutton>
</div>
</template>
.作用域插槽总结来说就是：
- 首先在子组件的slot上动态绑定一个值( :key='value')
- 然后在父组件通过#:name = ‘valueshaha ’的方式将这个值赋值给 valueshaha
- 最后通过{{ valueshaha.key }}的方式获取数据
插槽总结：
- 父组件中的<ebutton></ebutton> 中添加内容，是不会在页面上渲染的，所以有了插槽。
- 插槽本是父级调用子组件给子组件传html，作用域插槽是子传值给父级，父级绑定值再将html传给子
