插槽語(yǔ)法統(tǒng)籌
匿名插槽
<slot> 這就是默認(rèn)值 </slot>
<ebutton> {{ child }}</ebutton>
具名插槽,#可替換為v-slot
<slot name= 'one'> 這就是默認(rèn)值1</slot>
<ebutton>
<template #:one> 這是插入到one插槽的內(nèi)容 </template>
</ebutton>
作用域插槽
通過(guò)slot 我們可以在父組件為子組件添加內(nèi)容态蒂，通過(guò)給slot命名的方式，我們可以添加不止一個(gè)位置的內(nèi)容饲漾。但是我們添加的數(shù)據(jù)都是父組件內(nèi)的珍剑。上面我們說(shuō)過(guò)不能直接使用子組件內(nèi)的數(shù)據(jù)贫堰，但是我們是否有其他的方法穆壕，讓我們能夠使用子組件的數(shù)據(jù)呢？ 其實(shí)我們也可以使用v-slot的方式：
//子組件 ： (假設(shè)名為：ebutton)
<template>
<div class= 'button'>
<button> </button>
<slot name= 'one' :value1='child1'> 這就是默認(rèn)值1</slot> //綁定child1的數(shù)據(jù)
<slot :value2='child2'> 這就是默認(rèn)值2 </slot> //綁定child2的數(shù)據(jù)其屏，這里我沒(méi)有命名slot
</div>
</template>
new Vue({
el:'.button',
data:{
child1:'數(shù)據(jù)1',
child2:'數(shù)據(jù)2'
}
})
//父組件：（引用子組件 ebutton）
<template>
<div class= 'app'>
<ebutton>
// 通過(guò)v-slot的語(yǔ)法 將插槽 one 的值賦值給slotonevalue
<template #:one = 'slotonevalue'>
{{ slotonevalue.value1 }}
</template>
// 同上喇勋，由于子組件沒(méi)有給slot命名，默認(rèn)值就為default
<template #:default = 'slottwovalue'>
{{ slottwovalue.value2 }}
</template>
</ebutton>
</div>
</template>
.作用域插槽總結(jié)來(lái)說(shuō)就是：
- 首先在子組件的slot上動(dòng)態(tài)綁定一個(gè)值( :key='value')
- 然后在父組件通過(guò)#:name = ‘valueshaha ’的方式將這個(gè)值賦值給 valueshaha
- 最后通過(guò){{ valueshaha.key }}的方式獲取數(shù)據(jù)
插槽總結(jié)：
- 父組件中的<ebutton></ebutton> 中添加內(nèi)容偎行，是不會(huì)在頁(yè)面上渲染的川背，所以有了插槽。
- 插槽本是父級(jí)調(diào)用子組件給子組件傳html蛤袒，作用域插槽是子傳值給父級(jí)熄云，父級(jí)綁定值再將html傳給子
