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è)我們要實現(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這里其實是為了做一個默認(rèn)值處理，也就是父組件什么也不傳的時候，我們就顯示默認(rèn)的值不加這個默認(rè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>
`
運行后我們發(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>
運行結(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í)，爭取在項目中能很好的使用插槽知識，讓我們的項目代碼的復(fù)用性，可維護(hù)性更好。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue項目如何部署到Tomcat服務(wù)器上,Vue中自帶webpack,可以通過一行命令將項目打包,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
uniapp定義new plus.nativeObj.View實現(xiàn)APP端全局彈窗功能
文章介紹了在UniApp中使用`newplus.nativeObj.View`實現(xiàn)彈窗的原因和方法,它定義了一個`AppPopupView`彈窗函數(shù),并在`main.js`中掛載到全局頁面,以便在任何地方調(diào)用,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要介紹了vue 將多個過濾器封裝到一個文件中實現(xiàn)方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-09-09
vue.js基于v-for實現(xiàn)批量渲染 Json數(shù)組對象列表數(shù)據(jù)示例
這篇文章主要介紹了vue.js基于v-for實現(xiàn)批量渲染 Json數(shù)組對象列表數(shù)據(jù),結(jié)合實例形式分析了vue.js使用v-for遍歷json格式數(shù)據(jù)渲染列表相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設(shè)置動態(tài)表頭操作
這篇文章主要介紹了Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設(shè)置動態(tài)表頭操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
我們就來實現(xiàn)這樣一個Vue自定義指令v-time，將表達(dá)式傳入的時間戳實時轉(zhuǎn)換為相對時間。下面小編給大家?guī)砹耸褂肰ue開發(fā)一個實時性時間轉(zhuǎn)換指令，需要的朋友參考下吧2018-01-01
vue自定義密碼輸入框解決瀏覽器自動填充密碼的問題(最新方法)
這篇文章主要介紹了vue自定義密碼輸入框解決瀏覽器自動填充密碼的問題,通過將密碼輸入框的type設(shè)置為text，修改樣式上的顯示，來實現(xiàn)既可以讓瀏覽器不自動填充密碼，又可以隱藏密碼的效果，需要的朋友可以參考下2023-04-04
本文主要介紹了解決vue組件渲染沒更新數(shù)據(jù)問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了關(guān)于vue混入(mixin)的解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
使用vuex的時候,出現(xiàn)this.$store為undefined問題
這篇文章主要介紹了使用vuex的時候,出現(xiàn)this.$store為undefined問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06