溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用slots 分發內容
使用組件時常常會有組件組合使用的情況，如下：
<componentA> <componentB></componentB> <componentC></componentC> </componentA>
直接套用組件的話，父級組件會將子級組件覆蓋掉，不能實現需求的效果，為了實現該效果就需要使用 slots來內容分發
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
同時可以實測到可以引入多個并列的組件，組件會依次顯示
但是這只能解決單個 組件的引入 ，實際應用中需要多個應用的組件會在多個位置，為了解決這個問題，就得確定slot位置的唯一性為了確定slot 的vue 中可以給slot 添加行內 name來識別 ，
需要注意的是：同一父級下的slot 添加行內 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 組件的組合/分發實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
