Vue插槽slot使用

1.匿名插槽

// 子组件 Child1
<div>
    <slot></slot> // 此时插槽区域内显示文案hello
</div>

// 父组件
<Child1>hello</Child1>

2.具名插槽

用途：让内容显示到组件内的指定位置

// 子组件 Child1
<div>
    <slot></slot> // 显示默认的插槽
    <slot name="content"></slot> // 会显示v-slot为content的内容
</div>

// parent
<Child1>
    // 默认插槽使用default做参数
    <template v-slot:default>哈哈哈</template>
    // 具名插槽使用插槽名做参数
    <template v-slot:content>具名插槽</template>
</Child1>

3.作用域插槽

用途：让内容成为某组件内的动态变量内容

// 子组件 Child1
<div>
    <slot name="content" showValue="hahah"></slot> // 接受插槽传过来的hahah显示
</div>

// parent
<Child1>
    // 插槽方法获取子组件的内容slotValue变量，然后将获取到的hahah做显示传给插槽
    <template v-slot:content="slotValue">{{slotValue.showValue}}</template>
</Child1>