Vue2和3中的插槽区别及其简单案例

vue中的插槽是什么，官方解释是:

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口…

vue2插槽和vue3插槽基本概念是一致的，也是匿名插槽、具名插槽、作用域插槽三种，只是基础语法有一些区别。

下面让我们温习一下插槽的常用基础知识点。

匿名插槽

Vue2案例:

<!-- 子组件 child-component -->  
<template>  
  <div>  
    <slot></slot>  
  </div>  
</template>  

<!-- 父组件使用匿名插槽组件 child-component -->  
<template>  
  <child-component>  
    <p>这是默认插槽的内容哈哈哈</p>  
  </child-component>  
</template>

Vue3案例:

<!-- 子组件child-component -->  
<template>  
  <div>  
    <slot></slot>  
  </div>  
</template>  
  
<!-- 父组件使用插槽组件 child-component -->  
<template>  
  <child-component>  
    <template v-slot>  
      <p>这是默认插槽的内容hello world</p>  
    </template>  
  </child-component>  
</template>

具名插槽

Vue2案例:

<!-- 子插槽组件child-component -->  
<template>  
  <div>  
    <slot name="header"></slot>  
    <slot name="content"></slot>  
    <slot name="footer"></slot>  
  </div>  
</template>

<!-- 父组件使用插槽组件child-component -->  
<template>  
  <child-component>  
    <template slot="header">  
      <h1>这是header部分</h1>  
    </template>  
    <template slot="content">  
      <p>这是content</p>  
    </template>  
    <template slot="footer">  
      <p>这是footer</p>  
    </template>  
  </child-component>  
</template>

Vue3案例:

<!-- 子插槽组件child-component -->  
<template>  
  <div>  
    <slot name="header"></slot>  
    <slot name="content"></slot>  
  </div>  
</template>  

<!-- 父组件使用插槽组件 -->  
<template>  
  <child-component>  
    <template v-slot:header>  
      <h1>这是header</h1>  
    </template>  
    <template v-slot:content>  
      <p>这是content</p>  
    </template>  
  </child-component>  
</template>

作用域插槽

作用域插槽日常可能使用的很少，但是某些场景用起来还是很方便的。可以简单的理解为 作用域插槽允许父组件访问子组件内部的数据，并基于这些数据渲染内容。

Vue2案例:

<!-- 子组件child-component返回给父级组件user数据 -->  
<template>  
  <div>  
    <slot :user="user"></slot>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      user: { name: '张三000' }  
    }  
  }  
}  
</script>  
  
<!-- 父组件使用child-component ，并获取到子组件返回的 user数据-->  
<template>  
  <child-component>  
    <template slot-scope="scope">  
      <p>用户名：{{ scope.user.name }}</p>   <!--张三000-->
    </template>  
  </child-component>  
</template>

Vue3案例:

子插槽组件：

<template>  
    <slot :user="user"></slot>   
</template>  
<script setup>
import { reactive } from "vue";

const user = reactive({
    name: '张三',  
    age: 30  
});
</script>

父组件使用子插槽组件：

<template>  
  <div>  
    <child-component>  
        <template v-slot:default="{ user: { name, age } }">
            <p>姓名: {{ name }}</p>  
            <p>年龄: {{ age }}</p>  
        </template>  
    </child-component>  
  </div>  
</template>  
<script setup>
import ChildComponent from './ChildComponent.vue'; 
<script>