vue 插槽簡(jiǎn)介及使用示例
Vue的插槽,是一種內(nèi)容分發(fā)機(jī)制,但是我感覺(jué)它更加像組件的一種占位符的概念,通過(guò)插槽,等待組件外部傳入復(fù)雜的內(nèi)容。
使用插槽的好處
在以前的例子中todo-item插槽直接寫(xiě)在了todo-list插槽中,其實(shí)是比較不合理的,它會(huì)導(dǎo)致todo-list插槽比較死板,無(wú)法重用更多的其他組件。
Vue.component("todo-list", {
template: `
<ul>
<todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
data: function() {
return {
};
},
methods:{
}
});
通過(guò)插槽化改造,則可以允許使用todo-list組件的用戶自行的傳入想要使用的todo-item,而不是一個(gè)固定的內(nèi)容。
插槽改造過(guò)程
改造示例:
- 將todo-item組件從todo-list組件中移除,放到頁(yè)面的html代碼中。
- 將todo-list組件中原todo-item的位置修改為
- 因?yàn)閠odo-item移到了頁(yè)面html代碼中,所以需要將todo-list的data中的list,移回全局vue中,防止組件找不到list導(dǎo)致v-for報(bào)錯(cuò);handleDelete同理也要移至全局vue中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<todo-list>
<todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
</todo-list>
</div>
<script>
Vue.component("todo-list", {
template: `
<ul>
<slot></slot>
</ul>
`,
data: function() {
return {
};
},
methods:{
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
<li>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration:line-through">{{title}}</span>
<button v-show="!del" @click="handleClick">刪除</button>
</li>`,
data: function() {
return {};
},
methods: {
handleClick(){
console.log("點(diǎn)擊刪除按鈕!");
this.$emit('delete',this.title);
}
}
});
var vm = new Vue({
el: "#app",
data: {
list: [
{
title: "新課程1",
del: false
},
{
title: "新課程2",
del: true
},
{
title: "新課程3",
del: false
}
]
},
methods: {
handleDelete(vtitle){
console.log("刪除工程!",vtitle)
}
}
});
</script>
</body>
</html>
效果和改造前是一模一樣的。
插槽的種類
處理默認(rèn)插槽外,還有具名插槽,作用域插槽等等。
所謂的具名插槽就是指帶有名稱的插槽,解決的是一個(gè)組件中存在多個(gè)插槽的業(yè)務(wù)場(chǎng)景。比如有一個(gè)母版頁(yè)組件,希望區(qū)分頁(yè)頭,頁(yè)尾和頁(yè)面主體。實(shí)現(xiàn)如下效果:
<div class="container"> <header> <!-- 我們希望把頁(yè)頭放這里 --> </header> <main> <!-- 我們希望把主要內(nèi)容放這里 --> </main> <footer> <!-- 我們希望把頁(yè)腳放這里 --> </footer> </div>
那么這個(gè)組件應(yīng)該這樣編寫(xiě)
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
具體調(diào)用組件的位置,則有兩種寫(xiě)法:
一種是2.6之前的寫(xiě)法。
<組件名> <p slot="header">頭部段落</p> <p>主段落</p> <p slot="footer">尾部段落</p> </組件名>
一種是2.6之后的寫(xiě)法
<組件名> <template v-slot:header> <p>頭部段落</p> </template> <p>主段落</p> <template v-slot:footer> <label>尾部段落</label> </template> </組件名>
按照2.6之后的寫(xiě)法,我們嘗試將todo-item組件中增加一個(gè)前置lable和后置lable
- 在todo-item組件的template中的html中增加slot插槽,并標(biāo)記名稱
- html頁(yè)面的組件調(diào)用位置,使用template和v-slot的語(yǔ)法插入內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<todo-list>
<todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
<template v-slot:pretext>
<label>前置文字</label>
</template>
<template v-slot:suftext>
<label>后置文字</label>
</template>
</todo-item>
</todo-list>
</div>
<script>
Vue.component("todo-list", {
template: `
<ul>
<slot></slot>
</ul>
`,
data: function() {
return {
};
},
methods:{
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
<li>
<slot name="pretext"></slot>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration:line-through">{{title}}</span>
<button v-show="!del" @click="handleClick">刪除</button>
<slot name="suftext"></slot>
</li>`,
data: function() {
return {};
},
methods: {
handleClick(){
console.log("點(diǎn)擊刪除按鈕!");
this.$emit('delete',this.title);
}
}
});
var vm = new Vue({
el: "#app",
data: {
list: [
{
title: "新課程1",
del: false
},
{
title: "新課程2",
del: true
},
{
title: "新課程3",
del: false
}
]
},
methods: {
handleDelete(vtitle){
console.log("刪除工程!",vtitle)
}
}
});
</script>
</body>
</html>
作用域插槽:作用域插槽可以接收子組件傳遞的值,并根據(jù)不同的值顯示不同的內(nèi)容。如根據(jù)用戶根據(jù)返回的值控制樣式信息。
作用域插槽示例:
- 為todo-item的data屬性增加返回值vRandom
data: function() {
return {
vrandom:Math.random()
};
},
- 在todo-item的template的html中通過(guò)v-bind綁定組件中的屬性。
template: `
<li>
<slot name="pretext" :val="vrandom"></slot>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration:line-through">{{title}}</span>
<button v-show="!del" @click="handleClick">刪除</button>
<slot name="suftext"></slot>
</li>`,
- 在使用組件時(shí)通過(guò)模板語(yǔ)法調(diào)用綁定的變量
<div id="app">
<todo-list>
<todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
<template v-slot:pretext="{val}">
<label>前置文字{{val}}</label>
</template>
<template v-slot:suftext>
<label>后置文字</label>
</template>
</todo-item>
</todo-list>
</div>
全部html代碼為
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<todo-list>
<todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
<template v-slot:pretext="{val}">
<label>前置文字{{val}}</label>
</template>
<template v-slot:suftext>
<label>后置文字</label>
</template>
</todo-item>
</todo-list>
</div>
<script>
Vue.component("todo-list", {
template: `
<ul>
<slot></slot>
</ul>
`,
data: function() {
return {
};
},
methods:{
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
<li>
<slot name="pretext" :val="vrandom"></slot>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration:line-through">{{title}}</span>
<button v-show="!del" @click="handleClick">刪除</button>
<slot name="suftext"></slot>
</li>`,
data: function() {
return {
vrandom:Math.random()
};
},
methods: {
handleClick(){
console.log("點(diǎn)擊刪除按鈕!");
this.$emit('delete',this.title);
}
}
});
var vm = new Vue({
el: "#app",
data: {
list: [
{
title: "新課程1",
del: false
},
{
title: "新課程2",
del: true
},
{
title: "新課程3",
del: false
}
]
},
methods: {
handleDelete(vtitle){
console.log("刪除工程!",vtitle)
}
}
});
</script>
</body>
</html>
組件的插槽還有一種帶默認(rèn)值的用法:在slot中增加默認(rèn)內(nèi)容
template: `
<li>
<slot name="pretext" :val="vrandom"></slot>
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration:line-through">{{title}}</span>
<button v-show="!del" @click="handleClick">刪除</button>
<slot name="suftext">默認(rèn)尾部</slot>
</li>`,
如果調(diào)用組件時(shí)沒(méi)有在插槽位置插入內(nèi)容,則html展示以默認(rèn)內(nèi)容進(jìn)行填充,如果有插內(nèi)容則以插入值填充。
<div id="app">
<todo-list>
<todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
<template v-slot:pretext="{val}">
<label>前置文字{{val}}</label>
</template>
<template v-slot:suftext>
<label>后置文字</label>
</template>
</todo-item>
</todo-list>
</div>
效果

<div id="app">
<todo-list>
<todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
<template v-slot:pretext="{val}">
<label>前置文字{{val}}</label>
</template>
<template v-slot:suftext>
</template>
</todo-item>
</todo-list>
</div>
或者
<div id="app">
<todo-list>
<todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
<template v-slot:pretext="{val}">
<label>前置文字{{val}}</label>
</template>
</todo-item>
</todo-list>
</div>

以上就是vue 插槽簡(jiǎn)介及使用示例的詳細(xì)內(nèi)容,更多關(guān)于vue 插槽的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue.js模仿京東省市區(qū)三級(jí)聯(lián)動(dòng)的選擇組件實(shí)例代碼
選擇省市區(qū)是我們大家在填寫(xiě)地址的時(shí)候經(jīng)常會(huì)遇到的一個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于利用vue.js模仿實(shí)現(xiàn)京東省市區(qū)三級(jí)聯(lián)動(dòng)選擇組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-11-11
Vue 讀取HTMLCollection列表的length為0問(wèn)題
這篇文章主要介紹了Vue 讀取HTMLCollection列表的length為0問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
淺談vue.js導(dǎo)入css庫(kù)(elementUi)的方法
下面小編就為大家分享一篇淺談vue.js導(dǎo)入css庫(kù)(elementUi)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue.js路由mode配置之去掉url上默認(rèn)的#方法
今天小編就為大家分享一篇vue.js路由mode配置之去掉url上默認(rèn)的#方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue.js獲取被選擇的option的value和text值方法
今天小編就為大家分享一篇Vue.js獲取被選擇的option的value和text值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue中el-table實(shí)現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)
本文主要介紹了vue中el-table實(shí)現(xiàn)穿梭框(數(shù)據(jù)可以上移下移),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06

