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>