Vue插槽_特殊特性slot,slot-scope與指令v-slot說明
1、slot作用/概念：預(yù)先將將來要使用的內(nèi)容進(jìn)行保留；
2、具名插槽：給slot起個名字
3、slot、slot-scope已經(jīng)被廢棄推薦使用vue2.6.0中的v-slot；但是這邊還是對新舊方法對做一下使用說明。
slot插槽(不具名)
<body>
<div id="app">
<Test>
<div>slot插槽占位內(nèi)容</div>
</Test>
</div>
<template id="test">
<div>
<slot></slot>//定義插槽
<h3>這里是test組件</h3>
</div>
</template>
</body>
<script>
Vue.component('Test',{
template:"#test"
});
new Vue({
el:"#app",
})
</script>
slot具名插槽使用
在組件中使用slot進(jìn)行占位時，在slot標(biāo)簽內(nèi)使用name 屬性給slot插槽定義一個名字，就是具名插槽。在html中使用具名插槽時，使用slot引入
<body>
<div id="app">
<Test>
<div slot="header">這里是頭部</div>//具名插槽使用
<div slot="footer">這里是尾部</div>
</Test>
</div>
<template id="test">
<div>
<slot name="header"></slot>//具名插槽
<h3>這里是Test組件</h3>
<slot name="footer"></slot>
</div>
</template>
</body>
<script>
Vue.component(
'Test',{
template:"#test"
});
new Vue({
el:"#app"
})
</script>
v-slot使用
v-slot在組件中使用slot進(jìn)行占位時，也是在slot標(biāo)簽內(nèi)使用name 屬性給slot插槽定義一個名字。但是在html內(nèi)使用時就有些不同了。需要使用template模板標(biāo)簽，template標(biāo)簽內(nèi)，使用v-slot指令綁定插槽名，標(biāo)簽內(nèi)寫入需要添加的內(nèi)容
<body>
<div id="app">
<Test>
<template v-slot:header>//v-slot指令使用插槽
<h2>slot頭部內(nèi)容</h2>
</template>
<p>直接插入組件的內(nèi)容</p>
<template v-slot:footer>
<h2>slot尾部內(nèi)容</h2>
</template>
</Test>
</div>
<template id ='test'>
<div class="container">
<header>
<!-- 我們希望把頁頭放這里 -->
<slot name = "header"></slot>//具名插槽
</header>
<section>
主體內(nèi)容部分
</section>
<footer>
<!-- 我們希望把頁腳放這里 -->
<slot name = 'footer'></slot>
</footer>
</div>
</template>
</body>
<script>
Vue.component('Test',{
template:"#test"
});
new Vue({
el:"#app"
})
</script>
作用域插槽：
slot-scope使用：
a、：在組件模板中書寫所需slot插槽，并將當(dāng)前組件的數(shù)據(jù)通過v-bind綁定在slot標(biāo)簽上。
b、：在組件使用時，通過slot-scope=“gain”,接收組件中slot標(biāo)簽上綁定的數(shù)據(jù)。
c、:通過gain.xxx就可以使用綁定數(shù)據(jù)了
<body>
<div id="app">
<Test>
<div slot="default" slot-scope="gain">//作用域插槽的用法（slot-scope）
{{ gain.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>
作用域插槽：v-slot的用法
<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>
Vue2.6.0中使用v-slot指令取代了特殊特性slot與slot-scope，但是從上述案例可以看出，v-slot在使用時，需要在template標(biāo)簽內(nèi)，這點大家要注意。
補(bǔ)充知識：vue中v-slot指令如何應(yīng)用Vue插槽及與slot、slot-scope的用法區(qū)別
不具名插槽
子組件：
<template>
<div>
<!--定義不具名插槽 -->
<slot></slot>
<h3>這里是不具名插槽組件</h3>
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped></style>
在父組件中使用：
<template>
<div id="inforCategory-warp">
<!-- 不具名插槽 -->
<lxsolt>不具名插槽</lxsolt>
</div>
</template>
<script>
import lxsolt from './lx'
export default {
name: 'inforCategory',
components: {
lxsolt,
},
data(){
return{}
}
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>
作用域插槽：
slot-scope使用(slot-scope綁定的是子組件的數(shù)據(jù))：
在組件模板中書寫所需slot插槽，并將當(dāng)前組件的數(shù)據(jù)通過v-bind綁定在slot標(biāo)簽上。
在組件使用時，通過slot-scope=“scope”,接收組件中slot標(biāo)簽上綁定的數(shù)據(jù)。
通過scope.xxx就可以使用綁定數(shù)據(jù)了
具名插槽以及作用域插槽
子組件：
<template>
<div>
<slot name="header" :msg="name"></slot>
<h3>這里是具名插槽組件</h3>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
data() {
return {
name:'具名插槽組件'
}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped></style>
父組件：
<template>
<div id="inforCategory-warp">
<!-- 具名插槽 -->
<nameSlot>
<div slot="header" slot-scope="scope">這里是slot-scope<span style="color:red">{{scope.msg}}</span>頭部</div>
<div slot="footer">這里是尾部</div>
</nameSlot>
</div>
</template>
<script>
import nameSlot from './nameSlot'
export default {
name: 'inforCategory',
components: {
nameSlot,
},
data(){
return{
msg:'具名插槽信息',
msg2:'v-slot'
}
}
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>
v-slot以及作用域插槽
子組件:
<template>
<div>
<div class="container">
<header>
<!-- 我們希望把頁頭放這里 -->
<slot name="header"></slot>
</header>
<section>
v-slot組件
</section>
<footer>
<!-- 我們希望把頁腳放這里 -->
<slot name="footer" :msg="msg"></slot>
</footer>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg:'vsolt作用域插槽組件'
}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped></style>
父組件：
<template>
<div id="inforCategory-warp">
<vsolt>
<template v-slot:header>
<h2>slot頭部內(nèi)容</h2>
</template>
<p>直接插入組件的內(nèi)容</p>
<template v-slot:footer="scope">
<h2>slot尾部內(nèi)容<span style="color:red">{{scope.msg}}</span></h2>
</template>
</vsolt>
</div>
</template>
<script>
import vsolt from './v-slot'
export default {
name: 'inforCategory',
components: {
vsolt,
},
data(){
return{
msg:'具名插槽信息',
msg2:'v-slot'
}
}
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>
以上這篇Vue插槽_特殊特性slot,slot-scope與指令v-slot說明就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能
本次需求是做一個視頻列表，點擊視頻列表播放對應(yīng)視頻；同時要求實現(xiàn)斷點分段上傳大文件（視頻）的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能，感興趣的朋友一起看看吧2022-12-12
在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。這篇文章主要介紹了詳解vue2.6插槽更新v-slot用法總結(jié)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-03-03
本文主要介紹了一文搞懂vue編譯器(DSL)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
VUE如何利用vue-print-nb實現(xiàn)打印功能詳解
這篇文章主要給大家介紹了關(guān)于VUE如何利用vue-print-nb實現(xiàn)打印功能的相關(guān)資料,文中還給大家介紹了vue-print-nb使用中的常見問題，如空白頁,需要的朋友可以參考下2022-04-04
本篇文章主要介紹了vue中component組件的props使用詳解，這里整理了詳細(xì)的用法，具有一定的參考價值，有興趣的可以了解一下2017-09-09
詳談vue+webpack解決css引用圖片打包后找不到資源文件的問題
下面小編就為大家分享一篇詳談vue+webpack解決css引用圖片打包后找不到資源文件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3+ts+elementPLus實現(xiàn)v-preview指令
本文主要介紹了vue3+ts+elementPLus實現(xiàn)v-preview指令，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vuejs2.0實現(xiàn)分頁組件使用$emit進(jìn)行事件監(jiān)聽數(shù)據(jù)傳遞的方法
這篇文章主要介紹了vuejs2.0實現(xiàn)分頁組件使用$emit進(jìn)行事件監(jiān)聽數(shù)據(jù)傳遞的方法，非常不錯，具有參考借鑒價值，,需要的朋友可以參考下2017-02-02
Vue如何解決子組件data從props中無法動態(tài)更新數(shù)據(jù)問題
這篇文章主要介紹了Vue如何解決子組件data從props中無法動態(tài)更新數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue使用echarts實現(xiàn)柱狀圖動態(tài)排序效果
echarts在前端開發(fā)中實屬必不可缺的大數(shù)據(jù)可視化工具,這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實現(xiàn)柱狀圖動態(tài)排序效果,感興趣的可以了解下2023-10-10