Vue2和Vue3具名插槽的区别

---

前言

学习vue的使用使用的是Vue2，最近尝试Vue3写项目时发现有部分内容发生变化，下面说一下具名插槽的区别

---

一、先定义一个组件HomeHeader.vue:

<template>
  <div class="home-header">
    
    <div  class="item">
      <slot name="left">
        <span>左边</span>
      </slot>
    </div>

    <div class="item">
      <slot name="center">
        <span>中间</span>
      </slot>
    </div>

    <div class="item">
      <slot name="right">
        <span>右边</span>
      </slot>
    </div>
    
  </div>
</template>

<script>
export default {
    name: "Header"
}
</script>

<style>
.home-header{
  display: flex;
}
.item{
  flex: 1;
}
</style>

二、Vue2具名插槽的使用

<template>
  <div class="about">
    <home-header>
      <div slot="left"><button>左边</button></div>
      <div slot="center"><button>中间</button></div>
    </home-header>
  </div>
</template>
<script>
import HomeHeader from 'components/common/Home/HomeHeader.vue'
export default {
  name: "About",
  components:{
    HomeHeader
  }
}
</script>

三、Vue3具名插槽的使用

<template>
  <div class="about">
    <home-header>
      <template v-slot:left>
        <div><button>左边</button></div>
      </template>
      <template v-slot:center>
        <div><button>中间</button></div>
      </template>
      
    </home-header>
  </div>
</template>
<script>
import HomeHeader from 'components/common/Home/HomeHeader.vue'
export default {
  name: "About",
  components:{
    HomeHeader
  }
}
</script>