雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

Vue组件插槽的使用

2024-09-01 44

1. 什么是插槽


插槽的作用: 让封装的组件更加具有扩展性

插槽就是子组件提供给父组件使用的一个占位符,用 <slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如:html、组件等,填充的内容会替换到子组件中的 <slot></slot> 标签

2. 基础使用


<div id="app">    <parent>        12323    </parent></div><script>    var par = {        template: `<div>hello <slot></slot></div>`    }    let vm = new Vue({        el: '#app',        components: {            parent: par        }    })</script>

3. 具名插槽


v-slot: 可以简写为 #

<div id="app">    <layout>        <template v-slot:header>            123        </template>        <template #main>            456        </template>        <template #footer>            789        </template>    </layout></div><script>    var layout = {        template: `            <div>hello                 <header>                    <slot name="header"></slot>                </header>                <main>                    <slot name="main"></slot>                </main>                <footer>                    <slot name="footer"></slot>                </footer>            </div>        `    }    let vm = new Vue({        el: '#app',        components: {            layout: layout        }    })</script>

更新于:2个月前
赞一波!1

文章评论

评论问答