溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹如何在Vue中使用slot，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
單個 Slot
在子組件內使用特殊的<slot>元素就可以為這個子組件添加一個 slot (插槽),在父組件模板里,插入在子組件標簽內的所有內容將替代子組件的<slot>標簽及它的內容.示例代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app">
<child-component>
<p>分發的內容</p>
<p>更多分發的內容</p>
</child-component>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('child-component', {
template: '\
<div>\
<slot>\
<p>如果父組件沒用插入內容,我將作為默認出現</p>\
</slot>\
</div>'
});
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>子組件 child-component 的模板內定義一個 <slot> 元素,并且用一個 <p> 作為默認的內容,在父組件沒有使用 slot 時,會渲染這段默認的文本;如果寫入了 slot ,那就會替換整個 <slot>.所以上列渲染后的結果為:
<div id="app"> <div> <p>分發的內容</p> <p>更多分發的內容</p> </div> </div>
注意:子組件<slot>內的備用內容,它的作用域時子組件本身.
具名 Slot
給 <slot> 元素指定一個 name 后可以分發多個內容,具名 Slot 可以與單個 Slot 共存,例如下面的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app">
<child-component>
<h3 slot="header">標題</h3>
<p>正文內容</p>
<p>更多正文內容</p>
<div slot="footer">底部信息</div>
</child-component>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('child-component', {
template: '\
<div class="component">\
<div class="header">\
<slot name="header"></slot>\
</div>\
<div class="main">\
<slot></slot>\
</div>\
<div class="footer">\
<slot name="footer"></slot>\
</div>\
</div>'
});
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>子組件內聲明了3個 <slot> 元素,其中在<div class="main">內的<slot> 沒用使用 name 特性,它將作為默認 slot 出現,父組件沒有使用 slot 特性的元素與內容都將出現在這里.
如果沒有指定默認的匿名 slot, 父組件內多余的內容片段都將被拋棄.
上例最終渲染后的結果為:
<div id="app"> <div class="container"> <div class="header"> <h3>標題</h3> </div> <div class="main"> <p>正文內容</p> <p>更多的正文內容</p> </div> <div class="footer"> <div>底部信息</div> </div> </div> </div>
關于如何在Vue中使用slot就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
