vue中slot介绍

插槽概念

• 插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定
• 插槽显示的位置确由子组件自身决定

匿名插槽

单个插槽/默认插槽/匿名插槽(三中不同的叫法)

• 不用设置name属性
• 可以放置在组件的任意位置
• 一个组件中只能有一个该类插槽

案例

父组件

<slot-com>
    <div class="tmp1">
        我是父组件 == 使用子组件的匿名插槽
	</div>
</slot-com>  

子组件

<div class="child">
    <h3>这里是子组件 === 匿名插槽</h3>
	<slot></slot>
</div>

效果

具名插槽

• 插槽加了name属性，就变成了具名插槽
• 具名插槽可以在一个组件中出现N次(但是一个插槽名只能出现一次，也就是说不能重名)

注意

• 父组件中虽然更改了插槽的使用顺序，但是在页面显示的效果还是根据子组件的效果展示的
  • 因为插槽显示的位置由子组件决定，插槽显示的内容 由父组件决定
• 在父组件中同一个具名插槽可以使用多次(例如：我写了两个 slot = up 的div)

案例

父组件

<slot-com>
            <div class="tmp1" slot="up">
                我是父组件 == 使用子组件的具名 up 插槽
            </div>
            <div class="tmp1">
                我是父组件 == 使用子组件的匿名插槽
            </div>
            <div class="tmp1" slot="down">
                我是父组件 == 使用子组件的具名 down 插槽
            </div>
            <div class="tmp1" slot="up">
                我是父组件 == 使用子组件的具名 up 插槽
            </div>
        </slot-com> 

子组件

<!-- 具名插槽 -->
<div class="child">
    <h3>这里是子组件 === 具名插槽</h3>
    <slot name="up"></slot>
    <slot name="down"></slot>
    <slot></slot>            
</div>

效果

作用域插槽/带数据的插槽

带数据的插槽，在slot 上面绑定数据

案例

父组件

<slot-com>
    <template slot-scope="user">
        <div> {{ user.data }} </div>
	</template>
</slot-com> 

子组件

<slot :data="data"></slot>
	
export default {
    data: function(){
        return {
            data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
        }
    }
}

效果

总结

• 插槽最后显示不显示 由 父组件决定
• 插槽显示的顺序 由 子组件决定
• 父组件插槽中显示的数据，可以由子组件插槽上绑定的数据来决定