探索 Vue3 (二) 插槽slot

2023-12-20 15:34:32

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

匿名插槽

在子组件放置一个插槽

<template>
    <div>
       <slot></slot>
    </div>
</template>
 
<script setup lang="ts">


</script>

?父组件中使用：

?

<Son>
      <template v-slot>
        <div>哈哈哈哈哈哈</div>
      </template>
    </Son>

?具名插槽

具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中

子组件代码：

<template>
    <div>
        <slot name="top"></slot>
        <slot></slot>
        <slot name="bottom"></slot>
    </div>
</template>
 
<script setup lang="ts">


</script>

父组件中使用：

   <Son>
      <template v-slot:top>
        <div>我是头部</div>
      </template>
      <template v-slot>
        <div>哈哈哈哈哈哈</div>
      </template>
      <template v-slot:bottom>
        <div>我是尾部</div>
      </template>

    </Son>

动态插槽

插槽可以是一个变量名

 <Son>
      <template #[name]>
        <div>
          我是动态的
        </div>
      </template>
    </Son>
const name = ref('top')

文章来源:https://blog.csdn.net/weixin_38982591/article/details/135080901
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。