vue slot

vue slot
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

可以為slot指定名稱,如果沒有指定的名稱,則會使用預設的沒有名稱的slot 


<body>
<div id='myDiv' class="container">
slot是父元件和子元件的通訊方式,可以將父元件的內容顯示在子元件中<br>
<panel-tpl>
panel1
<div slot="header">slot-header</div>
<div slot="content">slot-content</div>
<div slot="footer">slot-footer</div>
</panel-tpl>
<br>
<br> <br>
<panel-tpl>
panel2
<div slot="header">aaaaslot-header</div>
<div slot="content">ssdasdslot-content</div>
<div slot="footer">dsadasdslot-footer</div>
<div slot="more">sdadsadzczc-footer</div>
</panel-tpl>
</div>
<template id='panel-tpl'>
<div class="card">
<div class="card-body">
父元件標籤裡面的內容:
<slot></slot>
<hr>
<!--繫結不同的slot在不同的地方顯示-->
<slot name='header'></slot>
<hr>
<slot name='content'></slot>
<hr>
<slot name='footer'></slot>
<!--預設資訊-->
<slot name='more'>更多</slot>
</div>
</div>
</template>
</body>
<script>
var hello = {
'panel-tpl': {
template: "#panel-tpl",
data: function () {
return {
cnt: 0,
}
},
methods: {
add: function () {
console.log('add')
this.cnt  
}
}
}
}
new Vue({
el: '#myDiv',
components: hello
})
</script>

指定兩個預設的slot

會輸出兩次

相關文章

程式語言 最新文章