vue 使用插槽分發(fā)內(nèi)容操作示例【單個(gè)插槽、具名插槽、作用域插槽】
本文實(shí)例講述了vue 使用插槽分發(fā)內(nèi)容操作。分享給大家供大家參考,具體如下:
單個(gè)插槽
除非子組件模板包含至少一個(gè) <slot> 插口,否則父組件的內(nèi)容將會(huì)被丟棄。當(dāng)子組件模板只有一個(gè)沒有屬性的插槽時(shí),父組件傳入的整個(gè)內(nèi)容片段將插入到插槽所在的 DOM 位置,并替換掉插槽標(biāo)簽本身。
最初在 <slot> 標(biāo)簽中的任何內(nèi)容都被視為備用內(nèi)容。備用內(nèi)容在子組件的作用域內(nèi)編譯,并且只有在宿主元素為空,且沒有要插入的內(nèi)容時(shí)才顯示備用內(nèi)容。
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實(shí)例 - 單個(gè)插槽</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="example"> <div> <h1>我是父組件的標(biāo)題</h1> <my-component> <p>這是一些初始內(nèi)容</p> <p>這是更多的初始內(nèi)容</p> </my-component> </div> </div> var childNode = { //當(dāng)沒有<slot>時(shí),父組件的其他內(nèi)容不會(huì)顯示,當(dāng)有<slot>時(shí),要是父組件中的內(nèi)容不為空,<slot> //中的內(nèi)容就不會(huì)顯示 template: ` <div> <h2>我是子組件的標(biāo)題</h2> <slot> 只有在沒有要分發(fā)的內(nèi)容時(shí)才會(huì)顯示。 </slot> </div> `, }; // 創(chuàng)建根實(shí)例 new Vue({ el: '#example', components: { 'my-component': childNode } }) </script> </body> </html>
具名插槽
<slot> 元素可以用一個(gè)特殊的特性 name 來進(jìn)一步配置如何分發(fā)內(nèi)容。多個(gè)插槽可以有不同的名字。具名插槽將匹配內(nèi)容片段中有對(duì)應(yīng) slot 特性的元素。
仍然可以有一個(gè)匿名插槽,它是默認(rèn)插槽,作為找不到匹配的內(nèi)容片段的備用插槽。如果沒有默認(rèn)插槽,這些找不到匹配的內(nèi)容片段將被拋棄。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實(shí)例 - 具名插槽</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="example"> <app-layout> <h1 slot="header">這里可能是一個(gè)頁面標(biāo)題</h1> <p>主要內(nèi)容的一個(gè)段落。</p> <p>另一個(gè)主要段落。</p> <p slot="footer">這里有一些聯(lián)系信息</p> </app-layout> </div> <script> Vue.component('app-layout',{ template:'<div class="container">'+ '<header>'+ '<slot name="header"></slot>'+ '</header>'+ '<main>'+ '<slot></slot>'+ '</main>'+ '<footer>'+ '<slot name="footer"></slot>'+ '</footer>'+ '</div>' }) // 創(chuàng)建根實(shí)例 new Vue({ el: '#example', }) </script> </body> </html>
作用域插槽
作用域插槽是一種特殊類型的插槽,用作一個(gè) (能被傳遞數(shù)據(jù)的) 可重用模板,來代替已經(jīng)渲染好的元素。
在子組件中,只需將數(shù)據(jù)傳遞到插槽,就像你將 prop 傳遞給組件一樣:
<div class="child"> <slot text="hello from child"></slot> </div>
在父級(jí)中,具有特殊特性 slot-scope 的 <template> 元素必須存在,表示它是作用域插槽的模板。slot-scope 的值將被用作一個(gè)臨時(shí)變量名,此變量接收從子組件傳遞過來的 prop 對(duì)象:
在 2.5.0+,slot-scope 能被用在任意元素或組件中而不再局限于 <template>。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實(shí)例 - 作用域插槽</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="example"> <parent-com></parent-com> </div> <script> Vue.component('child-com',{ template:'' + '<ul>' + ' <slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot>' + '</ul>', data:function(){ return { animal:[ {name:'大象'}, {name:'小狗'}, {name:'小貓'}, {name:'老虎'} ] } } }); //父組件 // 在父組件的模板里,使用一個(gè)Vue自帶的特殊組件<template> , // 并在該組件上使用scope屬性,值是一個(gè)臨時(shí)的變量,存著的是由子組件傳過來的 // prop對(duì)象,在下面的例子中我把他命名為props。 // 獲得由子傳過來的prop對(duì)象。這時(shí)候,父組件就可以訪問子組件在自定義屬性上暴露的數(shù)據(jù)了。 Vue.component('parent-com',{ template:'' + '<div class="container">' + '<p>動(dòng)物列表</p>' + '<child-com>' + ' <template scope="props" slot="child-ul">' + ' <li class="child-ul">{{ props.text }}</li>' + ' </template>' + '</child-com>' + '</div>' }); // 創(chuàng)建根實(shí)例 new Vue({ el: '#example', }) </script> </body> </html>
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue 使某個(gè)組件不被 keep-alive 緩存的方法
今天小編就為大家分享一篇vue 使某個(gè)組件不被 keep-alive 緩存的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue draggable實(shí)現(xiàn)從左到右拖拽功能
這篇文章主要為大家詳細(xì)介紹了Vue draggable實(shí)現(xiàn)從左到右拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04基于Vue設(shè)計(jì)實(shí)現(xiàn)一個(gè)彈幕組件
這篇文章主要給大家分享一個(gè)開發(fā)中常見的需求,接下來將為大家詳細(xì)介紹彈幕的實(shí)現(xiàn)以及設(shè)計(jì)思路一步一步描述出來,希望大家能夠喜歡2023-06-06ElementPlus 中el-select自定義指令實(shí)現(xiàn)觸底加載請(qǐng)求options數(shù)據(jù)的方法
觸底時(shí),繼續(xù)向后端發(fā)請(qǐng)求獲取下一頁的數(shù)據(jù),請(qǐng)求回來的數(shù)據(jù)合并給options,這篇文章主要介紹了ElementPlus 中el-select自定義指令實(shí)現(xiàn)觸底加載請(qǐng)求options數(shù)據(jù)的操作方法,需要的朋友可以參考下2024-08-08vue日常開發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫封裝
這篇文章主要為大家介紹了vue日常開發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08Vue使用Echarts圖表多次初始化報(bào)錯(cuò)問題的解決方法
最近在學(xué)習(xí)Vue的時(shí)候,正好學(xué)到了引入echarts圖表做數(shù)據(jù)統(tǒng)計(jì)的內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于Vue使用Echarts圖表多次初始化報(bào)錯(cuò)問題的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05