vue slots 組件的組合/分發(fā)實(shí)例
使用slots 分發(fā)內(nèi)容
使用組件時(shí)常常會(huì)有組件組合使用的情況，如下：
<componentA> <componentB></componentB> <componentC></componentC> </componentA>
直接套用組件的話，父級(jí)組件會(huì)將子級(jí)組件覆蓋掉，不能實(shí)現(xiàn)需求的效果，為了實(shí)現(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>沒有則顯示這個(gè)</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>標(biāo)簽沒有引入其他組件時(shí)顯示為圖1，有其他組件時(shí)顯示為圖2
同時(shí)可以實(shí)測到可以引入多個(gè)并列的組件，組件會(huì)依次顯示
但是這只能解決單個(gè) 組件的引入 ，實(shí)際應(yīng)用中需要多個(gè)應(yīng)用的組件會(huì)在多個(gè)位置，為了解決這個(gè)問題，就得確定slot位置的唯一性為了確定slot 的vue 中可以給slot 添加行內(nèi) name來識(shí)別 ，
需要注意的是：同一父級(jí)下的slot 添加行內(nèi) name必須保證唯一；
子組件下的slot 的name 是可以與父級(jí)組件的slot name 重復(fù)的，及每一級(jí)具有相對(duì)獨(dú)立性。
代碼效果圖如下：
<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">沒有則顯示這個(gè)</slot>\
<li>111</li>\
<li>222</li>\
<slot name="slot2">沒有則顯示這個(gè)</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ā)實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決vue的component標(biāo)簽渲染問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
本篇文章主要介紹了vue事件修飾符和按鍵修飾符用法總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
關(guān)于Vue中使用alibaba的iconfont矢量圖標(biāo)的問題
這篇文章主要介紹了Vue使用alibaba的iconfont矢量圖標(biāo)的問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
使用this.$router.go(-1)遇到的一些問題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue-cli3 karma單元測試的實(shí)現(xiàn)
這篇文章主要介紹了vue-cli3 karma單元測試的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
在 Vue 中,watch 屬性用于觀察和響應(yīng) Vue 實(shí)例上數(shù)據(jù)的變動(dòng),然而,默認(rèn)情況下,watch 確實(shí)不會(huì)觸發(fā)組件創(chuàng)建時(shí)的變動(dòng),這里有幾種方式可以處理或繞過這個(gè)問題,需要的朋友可以參考下2024-09-09
vue中this.$refs.name.offsetHeight獲取不到值問題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue-vuex中使用commit提交mutation來修改state的方法詳解
今天小編就為大家分享一篇vue-vuex中使用commit提交mutation來修改state的方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue如何實(shí)現(xiàn)文件預(yù)覽和下載功能的前端上傳組件
在Vue.js項(xiàng)目中,使用ElementUI的el-upload組件可以輕松實(shí)現(xiàn)文件上傳功能,通過配置組件參數(shù)和實(shí)現(xiàn)相應(yīng)的方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vue3實(shí)現(xiàn)下拉選擇框多選功能的方法詳解
在vue的實(shí)際開發(fā)過程中,我們?nèi)绾螌⒁赃x中的值直接渲染到頁面中,下面這篇文章主要給大家介紹了關(guān)于Vue3實(shí)現(xiàn)下拉選擇框多選功能的相關(guān)資料,需要的朋友可以參考下2023-09-09