vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解
默認(rèn)插槽
App.vue : 在app.vue中使用MyCategory,里面包裹的結(jié)構(gòu)是不顯示的,要想在頁(yè)面中顯示,就需要用到插槽。在子組件MyCategory中定義
<template> <div class="container"> <MyCategory title="美食" :listData="foods"> <img src="https://img2.baidu.com/it/u=251961508,2775599777&fm=253&fmt=auto&app=120&f=JPEG?w=280&h=80" style="width: 200px;height: 200px" alt=""> </MyCategory> <MyCategory title="游戲" :listData="games"> <ul> <li v-for="(g,index) in games" :key="index">{{g}}</li> </ul> </MyCategory> <MyCategory title="電影" :listData="films"> <video controls src="1186200849-1-16.mp4" style="width: 100%" alt=""></video> </MyCategory> </div> </template> <script> import MyCategory from "@/components/Category"; export default { name: 'App', components: {MyCategory}, data(){ return { foods:['火鍋','燒烤','小龍蝦','牛排'], games:['紅色警戒','穿越火線(xiàn)','qq飛車(chē)','和平精英'], films:['《怦然心動(dòng)》','《泰坦尼克號(hào)》','《魁拔》','《保你平安》'] } } } </script> <style> .container{ display: flex; justify-content: space-around; } </style>
Category.vue :在想要放入結(jié)構(gòu)的位置,插入<solt></solt>默認(rèn)插槽,app.vue中在子標(biāo)簽中寫(xiě)的結(jié)構(gòu)才會(huì)被插入到插槽的位置。插槽標(biāo)簽里寫(xiě)的文本只有在插槽沒(méi)數(shù)據(jù)時(shí)候才會(huì)顯示。
<template> <div class="category"> <h3>{{title}}分類(lèi)</h3> <!-- <li v-for="(item,index) in listData" :key="index">{{ item }}</li>--> <slot>我是一些默認(rèn)值,當(dāng)使用者沒(méi)有傳遞具體結(jié)構(gòu)時(shí)候,我會(huì)出現(xiàn)</slot> </div> </template> <script> export default { name: "MyCategory", props:['title','listData'] } </script> <style scoped> .category{ background-color: skyblue; width: 200px; height: 300px; } h3{ text-align: center; background-color: orange; } img{ width: 100%; } </style>
具名插槽
App.vue : 可以用多個(gè)插槽,插入在不同位置,需要在子組件中定義<solt name="xxx"></slot>加上name屬性名
<template> <div class="container"> <MyCategory title="美食" :listData="foods"> <img slot="center" src="https://img2.baidu.com/it/u=251961508,2775599777&fm=253&fmt=auto&app=120&f=JPEG?w=280&h=80" style="width: 200px;height: 200px" alt=""> <a slot="footer" href="#">更多美食</a> </MyCategory> <MyCategory title="游戲" :listData="games"> <ul slot="center"> <li v-for="(g,index) in games" :key="index">{{g}}</li> </ul> <div slot="footer" class="footer"> <a href="#">單機(jī)游戲</a> <a href="#">網(wǎng)絡(luò)游戲</a> </div> </MyCategory> <MyCategory title="電影" :listData="films"> <video slot="center" controls src="1186200849-1-16.mp4" style="width: 100%" alt=""></video> <template slot="footer"> <div class="footer"> <a href="#">經(jīng)典</a> <a href="#">搞笑</a> <a href="#">動(dòng)作</a> </div> <h4>歡迎前來(lái)觀(guān)影</h4> </template> </MyCategory> </div> </template> <script> import MyCategory from "@/components/Category"; export default { name: 'App', components: {MyCategory}, data(){ return { foods:['火鍋','燒烤','小龍蝦','牛排'], games:['紅色警戒','穿越火線(xiàn)','qq飛車(chē)','和平精英'], films:['《怦然心動(dòng)》','《泰坦尼克號(hào)》','《魁拔》','《保你平安》'] } } } </script> <style> .container,.footer{ display: flex; justify-content: space-around; } h4{ text-align: center; } </style>
Category.vue :<slot name="xxx"></slot>就可以定義多個(gè)插槽,放在不同位置
<template> <div class="category"> <h3>{{title}}分類(lèi)</h3> <!-- <li v-for="(item,index) in listData" :key="index">{{ item }}</li>--> <slot name="center">我是一些默認(rèn)值,當(dāng)使用者沒(méi)有傳遞具體結(jié)構(gòu)時(shí)候,我會(huì)出現(xiàn)</slot> <slot name="footer">我是一些默認(rèn)值,當(dāng)使用者沒(méi)有傳遞具體結(jié)構(gòu)時(shí)候,我會(huì)出現(xiàn)</slot> </div> </template> <script> export default { name: "MyCategory", props:['title','listData'] } </script> <style scoped> .category{ background-color: skyblue; width: 200px; height: 300px; } h3{ text-align: center; background-color: orange; } img{ width: 100%; } </style>
作用域插槽
App.vue:最實(shí)用的一種,可以實(shí)現(xiàn)子組件向父組件的逆向傳數(shù)據(jù)。 父組件中:<template scope="liner"></template> ,外面必須包著template標(biāo)簽,scope用來(lái)接收<slot>中傳過(guò)來(lái)的數(shù)據(jù),scope這里面的名子自己定義,取games數(shù)據(jù)時(shí)候用自己定義的scope中的名字來(lái)取xxx.games,如<slot>中定義了其他數(shù)據(jù),也可以xxx.msg,這樣取定義的其他數(shù)據(jù)。
<template> <div class="container"> <MyCategory title="游戲"> <template scope="liner"> <ul> <li v-for="(g,index) in liner.games" :key="index">{{g}}</li> </ul> </template> </MyCategory> <MyCategory title="游戲"> <template scope="liners"> <ol style="color: #bd362f"> <li v-for="(g,index) in liners.games" :key="index">{{g}}</li> </ol> </template> </MyCategory> <MyCategory title="游戲"> <template scope="linerz"> <h4 v-for="(g,index) in linerz.games" :key="index">{{g}}</h4> </template> </MyCategory> </div> </template> <script> import MyCategory from "@/components/Category"; export default { name: 'App', components: {MyCategory}, } </script> <style> .container,.footer{ display: flex; justify-content: space-around; } h4{ text-align: center; } </style>
Category.vue : 子組件中:<slot :games="games"></slot> 將data中的數(shù)據(jù)games綁定給games,給插槽傳遞了games數(shù)據(jù)
<template> <div class="category"> <h3>{{title}}分類(lèi)</h3> <!-- 1.子組件中:<slot :games="games">我是默認(rèn)的一些內(nèi)容</slot> 將data中的數(shù)據(jù)games綁定給games,給插槽傳遞了games數(shù)據(jù) 2.父組件中:<template scope="liner"></template> ,外面必須包著template標(biāo)簽,scope用來(lái)取slot中傳過(guò)來(lái)的數(shù)據(jù),scope這里面的名子自己定義,取games數(shù)據(jù)時(shí)候用自己定義的scope中的名字xxx.games --> <slot :games="games">我是默認(rèn)的一些內(nèi)容</slot> </div> </template> <script> export default { name: "MyCategory", props:['title'], data(){ return { games:['紅色警戒','穿越火線(xiàn)','qq飛車(chē)','和平精英'], } } } </script> <style scoped> .category{ background-color: skyblue; width: 200px; height: 300px; } h3{ text-align: center; background-color: orange; } img{ width: 100%; } </style>
以上就是vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解的詳細(xì)內(nèi)容,更多關(guān)于vue插槽的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03在Vue中實(shí)現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)
本文分享了如何在前端導(dǎo)出Excel文件,強(qiáng)調(diào)了前端導(dǎo)出的即時(shí)性、便捷性、靈活性和定制化優(yōu)勢(shì),以及減輕后端服務(wù)器負(fù)擔(dān)的特點(diǎn),詳細(xì)介紹了ExcelJS和FileSaver.js兩個(gè)工具庫(kù)的使用方法和主要功能,最后通過(guò)Vue實(shí)現(xiàn)了Excel的導(dǎo)出功能2024-10-10vue.js仿hover效果的實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue.js仿hover效果的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟
這篇文章主要介紹了vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03vue3中ace-editor的簡(jiǎn)單使用方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3中ace-editor簡(jiǎn)單使用的相關(guān)資料,ace-editor是一種代碼編輯器,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10