vue插槽slot用法
阿新 • • 發佈:2021-06-10
參考: https://blog.csdn.net/bobozai86/article/details/105473445
匿名插槽
子元件設定
<template>
<div>
<h1>今天天氣狀況:</h1>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'child'
}
</script>
父元件呼叫
<template> <div> <div>使用slot分發內容</div> <div> <child> <div style="margin-top: 30px">多雲,最高氣溫34度,最低氣溫28度,微風</div> </child> </div> </div> </template> <script> import child from "./child.vue"; export default { name: 'father', components:{ child } } </script>
具名插槽
子元件設定
<template> <div> <div class="header"> <h1>我是頁頭標題</h1> <div> <slot name="header"></slot> </div> </div> <div class="footer"> <h1>我是頁尾標題</h1> <div> <slot name="footer"></slot> </div> </div> </div> </template> <script> export default { name: "child1" } </script> <style scoped> </style>
父元件呼叫
<template> <div> <div>slot內容分發</div> <child1> <template slot="header"> <p>我是頁頭的具體內容</p> </template> <template slot="footer"> <p>我是頁尾的具體內容</p> </template> </child1> </div> </template> <script> import child1 from "./child1.vue"; export default { name: "father1", components: { child1 } } </script> <style scoped> </style>