Vue3中的插槽

最新推荐文章于 2025-04-22 09:53:28 发布

原创最新推荐文章于 2025-04-22 09:53:28 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #slot

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在Vue组件中使用slot功能，包括单slot的使用方法，以及如何在子组件中设置多个slot以便根据名称传递不同内容。通过实例演示了如何在父组件Home中插入文本到Head组件的slot区域，并展示了如何利用模板slot标签来区分不同的slot内容。

在子组件中预留一个slot标签，父组件可以在子组件标签中写入文本或者其他标签，这部分内容会显示在子组件中的slot标签的位置

子组件标签Head

<template>
   head组件<br />
   <slot></slot>
</template>

<script>
   export default{
       name:'Head'
   }
</script>

<style>
</style>

父组件Home

<template>
<div class="home">
  <Head :title='msg'
       @receive="printMsg"
   >
       Head标签内的文本
   </Head>
  </div>
</template>

<script>
import Head from '@/components/Head.vue'

export default {
name: 'Home',
components: {

        Head
}
}
</script>

多个slot时

子组件中有多个slot时，以name属性区分

Head组件

<template>
   head组件<br />
   <slot></slot>

<slot name="s1"></slot>
   <slot name="s2"></slot>
</template>

<script>
   export default{
       name:'Head'
   }
</script>

<style>
</style>

Home组件

<template>
<div class="home">
  <Head :title='msg'
       @receive="printMsg"
   >
       Head标签内的文本

        <template v-slot:s1>
           <label>slot1的内容</label>
       </template>
       <template v-slot:s2>
           <label>slot2的内容</label>
       </template>
   </Head>
  </div>
</template>

<script>
import Head from '@/components/Head.vue'

export default {
name: 'Home',
components: {

        Head
}
}
</script>