vue slots 組件的組合/分發(fā)實例
更新時間：2018年09月06日 15:12:36 作者：v折耳
今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
使用slots 分發(fā)內(nèi)容
使用組件時常常會有組件組合使用的情況，如下：
<componentA> <componentB></componentB> <componentC></componentC> </componentA>
直接套用組件的話，父級組件會將子級組件覆蓋掉，不能實現(xiàn)需求的效果，為了實現(xiàn)該效果就需要使用 slots來內(nèi)容分發(fā)
slots的使用方法如下：
<body>
<div id="app">
<app>
<child></child>
<child2></child2>
</app>
</div>
</body>
<script>
Vue.component('app',{
template:'\
<div>\
<slot>沒有則顯示這個</slot>\
<li>111</li>\
<li>222</li>\
<li>333</li>\
</div>\
',
})
var app=new Vue({
el:'#app',
components:{
'child':{
template:'<div>hello word</div>'
},
'child2':{
template:'<div>hello vue js</div>'
}
}
})
</script>
<app></app>標簽沒有引入其他組件時顯示為圖1，有其他組件時顯示為圖2
同時可以實測到可以引入多個并列的組件，組件會依次顯示
但是這只能解決單個 組件的引入 ，實際應(yīng)用中需要多個應(yīng)用的組件會在多個位置，為了解決這個問題，就得確定slot位置的唯一性為了確定slot 的vue 中可以給slot 添加行內(nèi) name來識別 ，
需要注意的是：同一父級下的slot 添加行內(nèi) name必須保證唯一；
子組件下的slot 的name 是可以與父級組件的slot name 重復的，及每一級具有相對獨立性。
代碼效果圖如下：
<body>
<div id="app">
<app>
<child slot="slot1">
</child>
<div slot="slot2">How to use slot?</div>
</app>
</div>
</body>
<script>
Vue.component('app',{
template:'\
<div>\
<slot name="slot1">沒有則顯示這個</slot>\
<li>111</li>\
<li>222</li>\
<slot name="slot2">沒有則顯示這個</slot>\
<li>333</li>\
</div>\
',
})
var app=new Vue({
el:'#app',
components:{
'child':{
template:'<div>hello word\
<li>22222</li>\
</div>'
},
'child2':{
template:'<div>hello vue js</div>'
}
}
})
</script>
以上這篇vue slots 組件的組合/分發(fā)實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue.js輪播圖組件使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了VUE在線調(diào)用阿里Iconfont圖標庫的方法,內(nèi)容是圍繞VUE前端和阿里Iconfont圖標庫展開的，經(jīng)歷了從網(wǎng)站上東拼西湊圖標的時代，大概是15~16年左右我開始解除阿里Iconfont圖標庫，剛開始就只會下載圖標使用，需要的朋友可以參考下2021-10-10
vue 實現(xiàn)根據(jù)data中的屬性值來設(shè)置不同的樣式
這篇文章主要介紹了vue 實現(xiàn)根據(jù)data中的屬性值來設(shè)置不同的樣式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue+axios實現(xiàn)文件下載及vue中使用axios的實例
這篇文章主要介紹了vue+axios實現(xiàn)文件下載及vue中使用axios的實例,需要的朋友可以參考下2018-09-09
vue-cli3+echarts實現(xiàn)漸變色儀表盤組件封裝
這篇文章主要為大家詳細介紹了vue-cli3+echarts實現(xiàn)漸變色儀表盤組件封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue是一款流行的前端框架，它提供了一系列的工具和組件，使得開發(fā)者可以更加便捷地創(chuàng)建交互式的Web應(yīng)用程序，輪播圖是Web應(yīng)用程序中常見的一種交互式組件，本文將介紹如何使用Vue和第三方組件庫 Element UI實現(xiàn)輪播圖功能,需要的朋友可以參考下2023-05-05
這篇文章主要給大家介紹了關(guān)于Vue項目中使用jquery的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)目錄樹結(jié)構(gòu)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了詳解Vue 項目中的幾個實用組件（ts），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
大家在做前端項目的時候,大部分頁面, 游客都可以直接訪問 , 如遇到 需要登錄才能進行的操作,頁面將提示并跳轉(zhuǎn)到登錄界面,那么如何才能實現(xiàn)頁面攔截并跳轉(zhuǎn)到對應(yīng)的登錄界面呢,本文小編就來給大家介紹一下Vue實現(xiàn)頁面訪問攔截的方法,需要的朋友可以參考下2023-08-08