slot元素作為VUE承載分發(fā)內(nèi)容的出口,也是組件的一塊HTML模板,這個(gè)塊模板顯示不顯示,以及怎樣顯示由父組件來決定;
1.默認(rèn)插槽: 又名單個(gè)插槽或者匿名插槽;這類插槽沒有具體的名字,一個(gè)組件只能有一個(gè)該類插槽.
<template>
<!-- 父組件 parent.vue -->
<div class="parent">
<h1>父容器</h1>
<child>
<div class="tmpl">
<span>菜單1</span>
</div>
</child>
</div>
</template>
<template>
<!-- 子組件 child.vue -->
<div class="child">
<slot></slot>
<h1>子組件</h1>
<slot></slot>
</div>
</template>
結(jié)果展示
2. 具名插槽: 匿名插槽沒有name屬性,所以叫匿名插槽.那么增加了name屬性,就變成了具名插槽;具名插槽可以在組件中出現(xiàn)N次,出現(xiàn)在不同的位置,只需要不同的name屬性區(qū)分即可.
<template>
<!-- 父組件 parent.vue -->
<div class="parent">
<h1>父容器</h1>
<child>
<div class="tmpl" slot="up">
<span>菜單up-1</span>
</div>
<div class="tmpl" slot="down">
<span>菜單down-1</span>
</div>
<div class="tmpl" slot="up">
<span>菜單up-1</span>
</div>
<div class="tmpl" slot="default">
<span>菜單->1</span>
</div>
<div class="tmpl">
<span>菜單->10</span>
</div>
</child>
</div>
</template>
<template>
<div class="child">
<!-- 具名插槽 -->
<slot name="up"></slot>
<h3>這里是子組件</h3>
<!-- 具名插槽 -->
<slot name="down"></slot>
<slot name="up"></slot>
<!-- 匿名插槽 -->
<slot></slot>
</div>
</template>
結(jié)果展示
如上圖所示,slot標(biāo)簽會(huì)根據(jù)父容器給child標(biāo)簽內(nèi)傳入內(nèi)容的slot屬性值,替換對(duì)應(yīng)的內(nèi)容.
其實(shí),默認(rèn)插槽也有name屬性,為default,同樣指定slot的name值為default,一樣可以顯示父組件中傳入的沒有指定slot的內(nèi)容
3. 作用域插槽: 作用域插槽可以是默認(rèn)插槽,也可以是具名插槽,不一樣的地方是,作用域插槽可以為slot標(biāo)簽綁定數(shù)據(jù),讓父組件可以獲取子組件的數(shù)據(jù).
<template>
<!-- parent.vue -->
<div class="parent">
<h1>這是父組件</h1>
<child1>
<template slot="default" slot-scope="slotProps">
{{ slotProps }}
<div v-for="item in slotProps" :key="item.id">
{{item.id}} --- {{item.name}} --- {{item.age}}
</div>
</template>
</child1>
</div>
</template>
<template>
<!-- child.vue -->
<div class="child">
<h1>這是子組件</h1>
<slot :user="user" :apple="apple"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: {
id:1,
name: '小趙',
age:18
},
apple:{
id:2,
name:"red",
age:100
}
}
}
}
</script>
結(jié)果展示
如上圖所示,子組件child在渲染默認(rèn)插槽slot時(shí),將數(shù)據(jù)user傳遞給了slot標(biāo)簽,在渲染過程中,父組件可以通過slot-scope屬性獲取到user數(shù)據(jù)并渲染視圖
slot 實(shí)現(xiàn)原理：當(dāng)子組件vm實(shí)例化時(shí)丈积，獲取到父組件傳入的 slot 標(biāo)簽的內(nèi)容闻鉴，存放在vm.slot.default，具名插槽為vm.
slot中的內(nèi)容進(jìn)行替換续挟，此時(shí)可以為插槽傳遞數(shù)據(jù)紧卒，若存在數(shù)據(jù)，則可曾該插槽為作用域插槽诗祸。
