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>