Vue之插槽(Slot)的使用
何為插槽
我們都知道在父子組件間可以通過v-bind,v-model搭配props 的方式傳遞值，但是我們傳遞的值都是以一些數(shù)字，字符串為主，但是假如我們要傳遞一個(gè)div或者其他的dom元素甚至是組件，那v-bind和v-model搭配props的方式就行不通了，但是插槽(slot)可以，插槽可以傳遞dom元素，在子組件中通過接收使用父組件傳遞過來的dom元素，我的理解就是在定義一個(gè)組件時(shí)，有些dom是動(dòng)態(tài)顯示的，即子組件現(xiàn)在不清楚調(diào)用它的組件需要咋顯示，是顯示button還是div，所以使用slot先占一個(gè)位置，父組件確定要顯示的dom后再顯示。
示例解析
插槽的基本使用
假設(shè)我們要實(shí)現(xiàn)一個(gè)form表單組件，由一個(gè)輸入框和一個(gè)按鈕組成，
如下圖：
這時(shí)候按鈕的樣式可能是多樣的，有的人喜歡使用button，有的喜歡使用div，所以這里我們可以將顯示按鈕的這里定義成一個(gè)插槽，
子組件的定義如下：
app.component('my-form',{
methods:{
handleClick(){
alert(123);
}
},
template:
` <div>
<input />
<span @click="handleClick">
<slot></slot> //定義插槽
</span>
</div>
`
});
注意： slot 插槽上面是無(wú)法綁定事件的，可以在上面使用一個(gè)<span>標(biāo)簽專門綁定事件
使用插槽：我們?cè)谑褂貌宀鄣臅r(shí)候可以傳遞一個(gè)div
<my-form>
<div>{{text}}</div>
</my-from>
可以傳遞一個(gè)button
<my-form>
<button>{{text}}</button>
</my-from>
還可以傳遞一個(gè)組件
定義一個(gè)test組件
app.component('test',{
template:`<div>hello world</div>`
})
傳遞組件給子組件
<my-form> <test /> </my-from>
所有測(cè)試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue使用插槽</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
text:"提交111"
}
},
template:
`
<my-form>
<div>{{text}}</div>
</my-from>
<my-form>
<button>{{text}}</button>
</my-from>
<my-form>
<test />
</my-from>
`
});
app.component('test',{
template:`<div>hello world</div>`
})
app.component('my-form',{
methods:{
handleClick(){
alert(123);
}
},
template:
` <div>
<input />
<span @click="handleClick">
<slot>default</slot>
</span>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
注意：
我們?cè)诙x子組件的插槽時(shí)： <slot>default</slot> 會(huì)在slot中間寫一個(gè)defult這里其實(shí)是為了做一個(gè)默認(rèn)值處理，也就是父組件什么也不傳的時(shí)候，我們就顯示默認(rèn)的值不加這個(gè)默認(rèn)值，頁(yè)面顯示會(huì)有問題
運(yùn)行結(jié)果：
具名插槽
我們的一個(gè)web頁(yè)面結(jié)構(gòu)分為：header,content,footer，我們要把header，footer做成一個(gè)插槽，讓其顯示：
按照我們第一小節(jié)的做法：
定義一個(gè)組件：
app.component('layout',{
template:`
<div>
<slot></slot>
<div>content</div>
</div>
`
});
使用：
template:
`
<layout>
<div >header</div>
<div >footer</div>
</layout>
`
運(yùn)行后我們發(fā)現(xiàn)不太對(duì)：
content無(wú)法放到header和footer之間，所以我們需要使用具名插槽，給插槽一個(gè)具體的名字，好擺放其位置：
把布局組件定義為：
app.component('layout',{
template:`
<div>
<slot name = "header"></slot>
<div>content</div>
<slot name = "footer"></slot>
</div>
`
});
使用插槽時(shí)：
const app = Vue.createApp({
// 具名插槽
template:
`
<layout>
<template v-slot:header>
<div >header</div>
</template>
<template v-slot:footer>
<div >footer</div>
</template>
</layout>
`
});
提示：具名插槽可以使用#header方式代替v-slot:header
所有測(cè)試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用具名插槽</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// 具名插槽
template:
`
<layout>
<template v-slot:header>
<div >header</div>
</template>
<template v-slot:footer>
<div >footer</div>
</template>
</layout>
`
});
app.component('layout',{
template:`
<div>
<slot name = "header"></slot>
<div>content</div>
<slot name = "footer"></slot>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
運(yùn)行結(jié)果：
這樣content就被準(zhǔn)確的放到了中間啦。
作用域插槽
當(dāng)我們?cè)谑褂貌宀蹠r(shí)，父組件想使用子組件的值，我們就可以使用作用域插槽。
假設(shè)定義了一個(gè)list組件，在子組件中提供了一組list值，父組件想使用這個(gè)list的值。
定義組件的代碼如下：
app.component('list',{
data(){
return{list:[1,2,3]}
},
template:
`
<div>
<slot v-for="item in list" :item="item" />
</div>
`
});
使用時(shí)如下：
const app = Vue.createApp({
// 解構(gòu)語(yǔ)法
template:
`
<list v-slot="slotProps">
<span>{{slotProps.item}}</span>
</list>
`
});
這里使用的時(shí)候可以使用解構(gòu)語(yǔ)法，寫成：
// 解構(gòu)語(yǔ)法
template:
`
<list v-slot="{item}">
<div>{{item}}</div>
</list>
`
這里需要注意v-slot="{item}里面的item必須和<slot v-for="item in list" :item="item" />這里對(duì)應(yīng)，不然無(wú)法渲染出來
總結(jié)
本文主要是介紹了組件間作用域的插槽使用，插槽的使用能使我們頁(yè)面的模塊化更靈活，使用起來更方便，讀者可以領(lǐng)會(huì)后多做練習(xí)，爭(zhēng)取在項(xiàng)目中能很好的使用插槽知識(shí)，讓我們的項(xiàng)目代碼的復(fù)用性，可維護(hù)性更好。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中的Tree-Shaking是什么,通過Tree-shaking，將沒有使用的模塊代碼移除掉，這樣來達(dá)到刪除無(wú)用代碼的目，本文結(jié)合實(shí)例代碼詳解詳解，需要的朋友可以參考下2023-04-04
Vue.js實(shí)現(xiàn)無(wú)限加載與分頁(yè)功能開發(fā)
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)無(wú)限加載與分頁(yè)功能開發(fā)實(shí)踐，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Vue中引入echarts的步驟及折線圖、柱狀圖常見配置項(xiàng)
這篇文章主要介紹了Vue中引入echarts的步驟及折線圖、柱狀圖常見配置項(xiàng),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了關(guān)于vite proxy跨域問題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了在vue中使用G2圖表的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
使用vue-router完成簡(jiǎn)單導(dǎo)航功能【推薦】
vue-router是Vue.js官方提供的一套專用的路由工具庫(kù)。這篇文章主要介紹了使用vue-router完成簡(jiǎn)單導(dǎo)航功能,需要的朋友可以參考下2018-06-06
vue3引入uview-plus3.0移動(dòng)組件庫(kù)的流程
這篇文章主要介紹了vue3引入uview-plus3.0移動(dòng)組件庫(kù)的流程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡(jiǎn)便方法
走馬燈功能在展示圖片時(shí)經(jīng)常用到,下面這篇文章主要給大家介紹了關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡(jiǎn)便方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue+ElementUI table實(shí)現(xiàn)表格分頁(yè)
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI table實(shí)現(xiàn)表格分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
vue發(fā)布到nginx下請(qǐng)求后臺(tái)404問題及解決
這篇文章主要介紹了vue發(fā)布到nginx下請(qǐng)求后臺(tái)404問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03