Vue3系列教程之插槽slot详解

原创

微芒不朽

发布于 2022-09-09 17:32:35

1.1K00

代码可运行

文章被收录于专栏：前端进阶-詹躲躲前端进阶-詹躲躲

运行总次数：0

代码可运行

1匿名插槽

(1)在子组件放置一个插槽,mytest.vue

<template>
    <div>
       <slot>我这里设置默认值</slot>
    </div>
</template> |

(2)父组件使用插槽,在父组件给这个插槽填充内容，如果不设置内容就会引用子组件的内容

<myslot>
 <template v-slot>
    <div>我是插槽的值</div>
  </template>
</myslot> |

2具名插槽

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

父组件使用需对应名称.

<myslot>
 <template v-slot:header>
    <div>我是插槽header的值</div>
  </template>
  <template v-slot>
    <div>我是插槽的值</div>
  </template>
  <template v-slot:footer>
    <div>我是插槽footer的值</div>
  </template>
</myslot> |

这里还可以进行简写

<myslot>
  <template#header>
    <div>我是插槽header的值</div>
  </template>
  <template#default>
    <div>我是插槽的值</div>
  </template>
  <template#footer>
    <div>我是插槽footer的值</div>
  </template>
</myslot> |

3作用域插槽

在子组件动态绑定参数派发给父组件的slot去使用.

<template>
   <div>
        <slot name="header"></slot>
        <div :key="item"v-for="item in 100">
            <slot v-bind:data="item">我这里设置默认值</slot>
        </div>
        <slot name="footer"></slot>
    </div>
</template> |

通过结构方式取值：

<myslot>
  <template#header>
    <div>我是插槽header的值</div>
  </template>
  <template#default="{ data }">
    <div>我是插槽传过来的值{{ data }}</div>
  </template>
  <template#footer>
    <div>我是插槽footer的值</div>
  </template>
</myslot> |

4动态插槽

插槽可以是一个变量名

<template>
  <div>
    <myslot>
      <template#[name]>
        <div>我是变量插槽{{name}}</div>
      </template>
    </myslot>
  </div>
</template>
<script setup lang="ts">
import myslot from './components/test_slot.vue'
import { ref } from 'vue'
const name = ref<string>('header')

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js