vue slot 使用

vue 插槽可用于父组件在子组件插入内容，其位置由子组件决定

1、默认插槽

在btntest子组件设置slot占位符

<div>
    <p>
        <!--默认插槽-->
        <slot></slot>

    </p>
</div>

在父组件直接写入要显示的内容

<btn-test>  
    <!--插入显示的内容-->
    <button>按钮</button>

</btn-test>

运行结果：

2、具名插槽

单需要使用多个插槽时，可便于区别是哪个插槽，需要插到哪里去

子组件:slot name属性绑定名称

<p>
    <!--具名插槽-->
    <slot name="header"></slot>

    <slot name="footer"></slot>

</p>

父组件：用slot属性获取名称

<btn-test>
    <template slot="footer">
        <div>具名插槽:底部</div>
    </template>

    <template slot="header">
        <div>具名插槽:头部</div>
    </template>
</btn-test>

运行结果：

即使在父组件吧底部和头部反过来写，起插入位置也不会乱

3、作用域插槽

所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的问题

子组件 

<slot name="content" :user="user">

</slot>

js 部分

export default {
    name: "",
    data(){
        return {
            user:{
                name:'lin'
            }
        }
    }
}

父组件

<template slot-scope="scope">
    作用域插槽：{{scope.user.name}}
</template>

运行结果：