溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了vue 使用插槽分發內容操作。分享給大家供大家參考，具體如下：
單個插槽
除非子組件模板包含至少一個 <slot> 插口，否則父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的插槽時，父組件傳入的整個內容片段將插入到插槽所在的 DOM 位置，并替換掉插槽標簽本身。
最初在 <slot> 標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯，并且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 單個插槽</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="example"> <div> <h2>我是父組件的標題</h2> <my-component> <p>這是一些初始內容</p> <p>這是更多的初始內容</p> </my-component> </div> </div> var childNode = { //當沒有<slot>時，父組件的其他內容不會顯示，當有<slot>時，要是父組件中的內容不為空，<slot> //中的內容就不會顯示 template: ` <div> <h3>我是子組件的標題</h3> <slot> 只有在沒有要分發的內容時才會顯示。 </slot> </div> `, }; // 創建根實例 new Vue({ el: '#example', components: { 'my-component': childNode } }) </script> </body> </html>
具名插槽
<slot> 元素可以用一個特殊的特性 name 來進一步配置如何分發內容。多個插槽可以有不同的名字。具名插槽將匹配內容片段中有對應 slot 特性的元素。
仍然可以有一個匿名插槽，它是默認插槽，作為找不到匹配的內容片段的備用插槽。如果沒有默認插槽，這些找不到匹配的內容片段將被拋棄。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 具名插槽</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="example">
<app-layout>
<h2 slot="header">這里可能是一個頁面標題</h2>
<p>主要內容的一個段落。</p>
<p>另一個主要段落。</p>
<p slot="footer">這里有一些聯系信息</p>
</app-layout>
</div>
<script>
Vue.component('app-layout',{
template:'<div class="container">'+
'<header>'+
'<slot name="header"></slot>'+
'</header>'+
'<main>'+
'<slot></slot>'+
'</main>'+
'<footer>'+
'<slot name="footer"></slot>'+
'</footer>'+
'</div>'
})
// 創建根實例
new Vue({
el: '#example',
})
</script>
</body>
</html>
作用域插槽
作用域插槽是一種特殊類型的插槽，用作一個 (能被傳遞數據的) 可重用模板，來代替已經渲染好的元素。
在子組件中，只需將數據傳遞到插槽，就像你將 prop 傳遞給組件一樣：
<div class="child"> <slot text="hello from child"></slot> </div>
在父級中，具有特殊特性 slot-scope 的 <template> 元素必須存在，表示它是作用域插槽的模板。slot-scope 的值將被用作一個臨時變量名，此變量接收從子組件傳遞過來的 prop 對象：
在 2.5.0+，slot-scope 能被用在任意元素或組件中而不再局限于 <template>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 作用域插槽</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="example">
<parent-com></parent-com>
</div>
<script>
Vue.component('child-com',{
template:'' +
'<ul>' +
' <slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot>' +
'</ul>',
data:function(){
return {
animal:[
{name:'大象'},
{name:'小狗'},
{name:'小貓'},
{name:'老虎'}
]
}
}
});
//父組件
// 在父組件的模板里，使用一個Vue自帶的特殊組件<template> ，
// 并在該組件上使用scope屬性，值是一個臨時的變量，存著的是由子組件傳過來的
// prop對象，在下面的例子中我把他命名為props。
// 獲得由子傳過來的prop對象。這時候，父組件就可以訪問子組件在自定義屬性上暴露的數據了。
Vue.component('parent-com',{
template:'' +
'<div class="container">' +
'<p>動物列表</p>' +
'<child-com>' +
' <template scope="props" slot="child-ul">' +
' <li class="child-ul">{{ props.text }}</li>' +
' </template>' +
'</child-com>' +
'</div>'
});
// 創建根實例
new Vue({
el: '#example',
})
</script>
</body>
</html>
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
