vue插槽的基本使用

记录插槽的基本使用,其实还是挺好玩的

带有插槽的组件 Layout/index.vue

默认插槽

<template>
    <Layout>
        <template v-slot:default> //也可不写template   "v-slot:" 可缩写为 "#"
        // <template #default> //此写法亦可
            <div>默认插槽</div>
        </template>
        // 不写template 也可不写div 不写任意标签
         <div>默认插槽</div>
    </Layout>
</template>

<script>
import Layout from "./"
export default {
    components: {
        Layout
    }
}
</script>

默认插槽会插入组件 <slot></slot>所在的位置,如果有多个,那么所有的slot都将被替换
此例"默认插槽"四字会插入main类的div中

具名插槽

在使用插槽(test.vue)时,可以不用在意插槽书写的位置,只要插槽名字对应,即可填充进组件的对应插槽

插槽默认值

当插槽位置需要一个默认值时,可以用如下方式