Vue插槽slot全部使用方法示例解析
何為插槽
我們都知道在父子組件間可以通過v-bind,v-model搭配props 的方式傳遞值，但是我們傳遞的值都是以一些數(shù)字，字符串為主，但是假如我們要傳遞一個div或者其他的dom元素甚至是組件，那v-bind和v-model搭配props的方式就行不通了，但是插槽(slot)可以，插槽可以傳遞dom元素，在子組件中通過接收使用父組件傳遞過來的dom元素，我的理解就是在定義一個組件時，有些dom是動態(tài)顯示的，即子組件現(xiàn)在不清楚調(diào)用它的組件需要咋顯示，是顯示button還是div，所以使用slot先占一個位置，父組件確定要顯示的dom后再顯示。
示例解析
插槽的基本使用
假設(shè)我們要實(shí)現(xiàn)一個form表單組件，由一個輸入框和一個按鈕組成，如下圖
這時候按鈕的樣式可能是多樣的，有的人喜歡使用button,有的喜歡使用div,所以這里我們可以將顯示按鈕的這里定義成一個插槽，子組件的定義如下：
app.component('my-form',{
methods:{
handleClick(){
alert(123);
}
},
template:
` <div>
<input />
<span @click="handleClick">
<slot></slot> //定義插槽
</span>
</div>
`
});
注意： slot 插槽上面是無法綁定事件的，可以在上面使用一個<span>標(biāo)簽專門綁定事件
使用插槽：我們在使用插槽的時候可以傳遞一個div
<my-form>
<div>{{text}}</div>
</my-from>
可以傳遞一個button
<my-form>
<button>{{text}}</button>
</my-from>
還可以傳遞一個組件
定義一個test組件
app.component('test',{
template:`<div>hello world</div>`
})
傳遞組件給子組件
<my-form> <test /> </my-from>
所有測試代碼：
<!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>
注意：我們在定義子組件的插槽時： <slot>default</slot> 會在slot中間寫一個defult這里其實(shí)是為了做一個默認(rèn)值處理，也就是父組件什么也不傳的時候，我們就顯示默認(rèn)的值不加這個默認(rèn)值，頁面顯示會有問題
運(yùn)行結(jié)果：
具名插槽
我們的一個web頁面結(jié)構(gòu)分為：header,content,footer，我們要把header，footer做成一個插槽，讓其顯示：
按照我們第一小節(jié)的做法：
定義一個組件：
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)不太對：
content無法放到header和footer之間，所以我們需要使用具名插槽，給插槽一個具體的名字，好擺放其位置：
把布局組件定義為：
app.component('layout',{
template:`
<div>
<slot name = "header"></slot>
<div>content</div>
<slot name = "footer"></slot>
</div>
`
});
使用插槽時：
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
所有測試代碼：
<!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)我們在使用插槽時，父組件想使用子組件的值，我們就可以使用作用域插槽。
假設(shè)定義了一個list組件，在子組件中提供了一組list值，父組件想使用這個list的值。定義組件的代碼如下：
app.component('list',{
data(){
return{list:[1,2,3]}
},
template:
`
<div>
<slot v-for="item in list" :item="item" />
</div>
`
});
使用時如下：
const app = Vue.createApp({
// 解構(gòu)語法
template:
`
<list v-slot="slotProps">
<span>{{slotProps.item}}</span>
</list>
`
});
這里使用的時候可以使用解構(gòu)語法，寫成：
// 解構(gòu)語法
template:
`
<list v-slot="{item}">
<div>{{item}}</div>
</list>
`
這里需要注意v-slot="{item}里面的item必須和<slot v-for="item in list" :item="item" />這里對應(yīng)，不然無法渲染出來
總結(jié)
本文主要是介紹了組件間作用域的插槽使用，插槽的使用能使我們頁面的模塊化更靈活，使用起來更方便，讀者可以領(lǐng)會后多做練習(xí)，爭取在項(xiàng)目中能很好的使用插槽知識，讓我們的項(xiàng)目代碼的復(fù)用性，可維護(hù)性更好。
到此這篇關(guān)于Vue插槽slot全部使用方法示例解析的文章就介紹到這了,更多相關(guān)Vue插槽slot內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vite構(gòu)建項(xiàng)目并支持微前端，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue 實(shí)現(xiàn)網(wǎng)頁截圖功能詳解
這篇文章主要介紹了通過vue實(shí)現(xiàn)網(wǎng)頁截圖的功能，有興趣的童鞋可以了解一下2021-11-11
Vue 固定頭 固定列 點(diǎn)擊表頭可排序的表格組件
這篇文章主要介紹了Vue 固定頭 固定列 點(diǎn)擊表頭可排序的表格組件的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了vue.js層疊輪播效果，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11
解決vue-cli + webpack 新建項(xiàng)目出錯的問題
下面小編就為大家分享一篇解決vue-cli + webpack 新建項(xiàng)目出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了如何修改vuex里面的數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
詳解Vue2.x-directive的學(xué)習(xí)筆記
這篇文章主要介紹了詳解Vue2.x-directive的學(xué)習(xí)筆記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Vue雙向數(shù)據(jù)綁定與響應(yīng)式原理深入探究
本節(jié)介紹雙向數(shù)據(jù)綁定以及響應(yīng)式的原理，回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應(yīng)式是否相同，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-08-08
vuex存儲數(shù)據(jù)的幾種方法實(shí)例詳解
在瀏覽網(wǎng)頁時我們有些時候需要記住一些用戶選擇的信息,比如登陸時我們?nèi)绻x擇了記住密碼,那么我們下次進(jìn)入該網(wǎng)頁時就會有你上次的登陸信息,下面這篇文章主要給大家介紹了關(guān)于vuex存儲數(shù)據(jù)的幾種方法,需要的朋友可以參考下2022-10-10
本文主要介紹了淺談Vue組件及組件的注冊方法，詳細(xì)的介紹了什么是組件，及其組件注冊的兩種方式(全局和局部)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08