VUE学习4-slot插槽

slot名为插槽。分为:具名slot(指定name属性值的slot)和默认slot。具名也就是named,如<slot name="side-bar">,这个slot只能和父组件中的<div slot="sider-bar">侧边栏</div>相对应。

slot主要应用于内容分发。例如幻灯片组件silder component,只需在父组件中引入<slider></slider>,再DIY标签中的内容显示位置即可。而<slider></slider>中的内容在Vue.component()中定义。

<div id="app">
    <!-- 轮播组件 -->
    <slider>
        <li v-for='data in datalist1'>{{data}}</li>
        <div slot="a">a-content</div>
        <div slot="b">b-content</div>
    </slider>
</div>

<script>
    // 定义slider组件
    Vue.component('slider',{
        template:`
            <div>
                <ul>
                    <slot></slot>
                    <!-- 只插入name为a的插槽 -->
                    <slot name="a"></slot>
                </ul>
            </div>`
    })
    new Vue({
        el:"#app",
        data:{
            datalist1:['aaa','bbb','ccc'],
        }
    })
</script>

结果显示为: