本篇文章給大家分享的是有關如何在Vue利用slot插槽分發內容，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
單個插槽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>我是父組件的標題</h2>
<my-component>
<p>這是一些初始內容</p>
<p>這是更多的初始內容</p>
</my-component>
</div>
<script type="text/javascript">
Vue.component('my-component', {
// 有效，因為是在正確的作用域內
template: '<div>\
<h3>我是子組件的標題</h3>\
<slot>只有在沒有要分發的內容時才會顯示。</slot>\
</div>',
data: function () {
return {
}
}
});
new Vue({
el:'#app',
data:{
msg:'你好啊'
}
})
</script>
</body>
</html>組件中的模板中寫入slot標簽，在父級調用子組件的時候傳入html即可。
具名插槽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<my-component>
<h2 slot="header">這里可能是一個頁面標題</h2>
<p>主要內容的一個段落。</p>
<p>另一個主要段落。</p>
<p slot="footer">這里有一些聯系信息</p>
</my-component>
</div>
<script type="text/javascript">
Vue.component('my-component', {
// 有效，因為是在正確的作用域內
template: '<div class="container">\
<header>\
<slot name="header"></slot>\
</header>\
<main>\
<slot></slot>\
</main>\
<footer>\
<slot name="footer"></slot>\
</footer>\
</div>',
data: function () {
return {
}
}
});
new Vue({
el:'#app',
data:{
msg:'你好啊'
}
})
</script>
</body>
</html>具名插槽，顧名思義當有多個slot標簽時，你需要給他們起個自己的名字，在父組件調用時需要slot="內部的對應名字"，當存在沒有命名的slot標簽時，父級組件傳入的默認html代碼將全部輸出在無名的slot標簽中。
作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 在父級中，具有特殊特性 slot-scope 的 <template> 元素必須存在，表示它是作用域插槽的模板。slot-scope 的值將被用作一個臨時變量名，此變量接收從子組件傳遞過來的 prop 對象： -->
<child>
<template scope="props">
<span>hello from parent</span><br>
<span>{{ props.text }}</span>
</template>
</child>
</div>
<script type="text/javascript">
// 在子組件中，只需將數據傳遞到插槽，就像你將 prop 傳遞給組件一樣：
Vue.component('child',{
template:'<ul>' +
'<slot text="hello from child"></slot>' +
'</ul>',
data:function(){
return {
}
},
});
new Vue({
el:'#app',
data:{
msg:'你好啊'
}
})
</script>
</body>
</html>作用域插槽是一種特殊類型的插槽，用作一個 (能被傳遞數據的) 可重用模板，來代替已經渲染好的元素。
其實就是相當于，在父組件中可以獲取到子組件傳遞出來的props對象，從而渲染到父組件上。
以上就是如何在Vue利用slot插槽分發內容，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
