Vue3中的插槽

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