vue插槽

1.默认插槽

默认插槽：<slot></slot>

//子组件
<div>
    <slot>默认内容</slot>
</div>

//父组件
<div>
    <Children>
        <p>123</p>
    </Children>
</div>

//父组件的p标签会替换子组件slot标签中的内容

2.具名插槽

具名插槽：<slot name="名称"></slot>

//子组件
<div>
    <slot name='one'>默认内容</slot>
    <slot name='two'>默认内容</slot>
</div>

//父组件
<div>
    <Children>
        <template v-slot:one>插槽1的内容</template>
        <template v-slot:two>插槽2的内容</template>
    </Children>
</div>


//父组件的template模板会替换子组件slot标签中的内容

3.作用域插槽

作用域插槽：<slot :自定义name=data中的属性或对象></slot>

//子组件
<div>
    <slot name='one' :data1='obj'>默认内容</slot>
    <slot name='two'>默认内容</slot>
</div>
<script>
    data(){
        return{
            obj:{
                user:'zhangsan',
                pwd:178999
            }
        }
    }
</script>

//父组件 (vue2.6中，slot-scope被废弃，取而代之的是v-slot,可简写为#xxx)
<div>
    <Children>
        <template v-slot:one='slotData1'>
            {{slotData1.data1.user}}
        </template>
        //简写
        <template #one='slotData1'>
            {{slotData1.data1.user}}
        </template>
        <template v-slot:two>插槽2的内容</template>
    </Children>
</div>

//父组件的template模板会替换子组件slot标签中的内容