插槽（slot)、普通插槽、具名插槽（多个插槽）、作用域插槽（slot绑定数据）

最新推荐文章于 2024-04-18 20:12:13 发布

——周彤——

最新推荐文章于 2024-04-18 20:12:13 发布

阅读量651

点赞数

分类专栏： vue传值 vue 传参文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Zt0118/article/details/127902364

版权

1.使用普通插槽

index.vue（引入test.vue,注册)

 <template>
  <p>使用插槽</p>
//使用插槽
    <test>
        <p>插入的内容</p>
    </test>
</template>

test.vue

<template>
  <p>普通插槽</p>
//slot占位
    <slot></slot>
</template>

2.具名插槽（多个插槽）

index.vue（引入test.vue,注册)

v-slot:可简写为#

 <template>
  <p>具名插槽</p>
    //使用插槽
    <test>
//必须用template包裹
       <template v-slot:header>
             <p>插入的内容</p>
        </template>
    </test>
 <test>
//必须用template包裹
       <template #footer>
             <p>插入的内容<