Vue3中的插槽

最新推荐文章于 2023-12-23 15:36:06 发布

SignalFire

最新推荐文章于 2023-12-23 15:36:06 发布

阅读量167

点赞数

分类专栏： Vue 文章标签： vue.js slot

本文链接：https://blog.csdn.net/SignalFire/article/details/124923829

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在子组件中预留一个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>

SignalFire

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3中的插槽

在子组件中预留一个slot标签，父组件可以在子组件标签中写入文本或者其他标签，这部分内容会显示在子组件中的slot标签的位置子组件标签Head<template> head组件<br /> <slot></slot></template><script> export default{ name:'Head' }</script><style>...
复制链接

扫一扫