深入理解vue中的slot與slot-scope
官網插槽
Vue中插槽-----特殊特性slot、slot-scope與指令v-slot的使用方法
Vue的slot-scope的場景的個人理解
總結
- .slot插槽(不具名)相當於在子組件中佔有一個位置，父組件可以填入文本內容
- 具名就是子組件name="xxx"父組件slot=“xxx” 例如：
<div slot="header">這裏是頭部</div>
<slot name="footer"></slot>
3.v-slot使用：v-slot在組件中使用slot進行佔位時，也是在slot標籤內使用name 屬性給slot插槽定義一個名字。但是在html內使用時就有些不同了。需要使用template模板標籤，template標籤內，使用v-slot指令綁定插槽名，標籤內寫入需要添加的內容
父組件：
<template v-slot:header>//v-slot指令使用插槽
<h2>slot頭部內容</h2>
</template>
子組件：
<slot name = "header"></slot>//具名插槽
- 作用域插槽（slot-scope使用）：
a、：在組件模板中書寫所需slot插槽，並將當前組件的數據通過v-bind綁定在slot標籤上。
b、：在組件使用時，通過slot-scope=“gain”,接收組件中slot標籤上綁定的數據。
c、:通過gain.xxx就可以使用綁定數據了
<body>
<div id="app">
<Test>
<div slot="default" slot-scope="gain">//作用域插槽的用法（slot-scope）
{{ gain.msg }} // gain接收slot=default所有數據，這裏msg只是其中一個
</div>
</Test>
</div>
<template id="test">
<div>
<slot name="default" :msg="msg"> </slot>
<p>這裏是test組件</p> //
</div>
</template>
</body>
<script>
new Vue({
el:"#app",
components:{
'Test':{
template:"#test",
data(){
return {
msg:"你好"
}
},
}
}
})
</script>
5.作用域插槽：v-slot的用法（和slot-scop用法類似）
<body>
<div id="app">
<Test>
<template v-slot:header="gain">//v-slot定義作用域插槽
<div>
<h3>slot</h3>
<p> {{gain.msg}} </p>
</div>
</template>
</Test>
</div>
<template id="test">
<div>
<slot name="header":msg="msg"></slot>
<p>這裏是test組件</p>
</div>
</template>
</body>
<script>
Vue.component('Test',{
template:"#test",
data(){
return {
msg:'這裏是頭部'
}
}
});
new Vue({
}).$mount("#app")
</script>
- 解構插槽 Prop
data(){
return {
msg: {
a: '111'
},
msg2: {
b: '111'
}
}
}
// 解構插槽 Prop
<slot name="header":msg="msg" :msg2="msg2"></slot>
<template v-slot:header="{ msg }">//v-slot定義作用域插槽
<div>
<h3>slot</h3>
<p> {{msg.a}} </p>
</div>
</template>
//你甚至可以定義後備內容，用於插槽 prop 是 undefined 的情形：
template v-slot:header="{ msg = {a = "222"} }">
<div>
<h3>slot</h3>
<p> {{msg.a}} </p> //undefined 就是222
</div>
</template>