当前位置 > it书童 > vue > 正文

在 Vue 中使用插槽 slot

vue it书童 2020-01-08 22:32:40 0赞 0踩 90阅读 0评论
<div id="app">
    <div class="container mt-5">
        <child content="<p>Dell</p>"></child>
    </div>
</div>
<script>
    Vue.component('child', {
        props: ['content'],
        template: `<div>
                        <p>hello</p>
                        <div v-html="this.content"></div>
                    </div>`,
    })

    var app = new Vue({
        el: '#app',
    })
</script>

这样写能起作用,但是会多一个 div 标签

image-20200108214004523

改成模板占位符就无法渲染

 <template v-html="this.content"></template>

所以必须加一个 div 包裹

如果父组件传递的数据多,这种写法也很丑陋

插槽能让父组件更加优雅地向子组件传值

<div id="app">
    <div class="container mt-5">
        <child>
            <p>Dell</p>
        </child>
    </div>
</div>
<script>
    Vue.component('child', {
        props: ['content'],
        template: `<div>
                        <p>hello</p>
                        <slot></slot>
                    </div>`,
    })

    var app = new Vue({
        el: '#app',
    })
</script>

还可以在插槽写默认值

<slot>默认值</slot>
<div id="app">
    <div class="container mt-5">
        <body-content>
            <div class="header">header</div>
            <div class="footer">footer</div>
        </body-content>
    </div>
</div>
<script>
    Vue.component('body-content', {
        template: `<div>
                        <slot></slot>
                        <div class="content">content</div>
                        <slot></slot>
                   </div>`,
    })

    var app = new Vue({
        el: '#app',
    })
</script>

使用具名插槽

<div id="app">
    <div class="container mt-5">
        <body-content>
            <div class="header" slot="header">header</div>
            <div class="footer" slot="footer">footer</div>
        </body-content>
    </div>
</div>
<script>
    Vue.component('body-content', {
        template: `<div>
                        <slot name="header"></slot>
                        <div class="content">content</div>
                        <slot name="footer"></slot>
                   </div>`,
    })

    var app = new Vue({
        el: '#app',
    })
</script>

通过这种写法,可以传递多个插槽

转载须注明出处:https://www.itshutong.com/articles/382/using-slot-slots-in-vue
标签: 讲义
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录