vue3 插槽入门

143 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天,点击查看活动详情

Vue3 中的插槽,是一种非常强大的功能,可以让开发者更加便捷地灵活定制组件,而不用担心组件之间的冲突。

先看看一个插槽的基本用法,假设我们有一个组件 MyButton,它有一个 slot,可以用来放置其他组件:

<MyButton>
  <span>你好,我是一个按钮</span>
</MyButton>

然后在 MyButton 组件内部,我们可以通过 <slot> 标签来接受外部传入的组件:

<div>
  <slot>
    <span>默认内容</span>
  </slot>
</div>

这样,当我们在使用 MyButton 组件的时候,就可以把外部传入的组件放到 <slot> 标签里,而不会影响到 MyButton 组件的内部结构。

Vue3 的插槽也支持更多的功能,比如可以在插槽中传入 props,以便外部组件能够接收到插槽的 props:

<MyButton>
  <span slot-props="{ message: 'hello world' }">你好,我是一个按钮</span>
</MyButton>

然后,在 MyButton 组件中,可以通过 v-slot 指令来获取传入的 props:

<div>
  <slot v-slot="{ message }">
    <span>{{ message }}</span>
  </slot>
</div>

这样,就可以在 MyButton 组件中使用传入的 props,可以让外部组件和插槽组件之间更加灵活高效地交互,从而更好地实现复杂的功能。

Vue3 的插槽功能让组件的定制更加灵活,可以在不影响组件内部结构的情况下,实现复杂的功能。而且,插槽还可以接受外部传入的 props,从而让组件和插槽之间更加灵活高效地交互,让开发者可以更加简单地实现复杂的功能。

另外,Vue3 中的插槽还支持动态插槽,可以动态渲染和控制组件内容。比如,我们可以通过 v-for 指令来动态渲染一组插槽:

<MyButton v-for="item in items" :key="item.id">
  <span>{{ item.name }}</span>
</MyButton>

另外,Vue3 还支持 <template> 标签,可以把多个插槽放在一个 <template> 标签中,而不用担心多个插槽之间的冲突:

<MyButton>
  <template>
    <span>插槽1</span>
    <span>插槽2</span>
    <span>插槽3</span>
  </template>
</MyButton>

Vue3 的插槽功能强大且灵活,可以让组件开发者更加简单地实现复杂的功能,让组件之间更加高效地交互。