vue中的插槽是什么勾笆，官方解釋是:
Vue 實現(xiàn)了一套內(nèi)容分發(fā)的 API梧宫，這套 API 的設(shè)計靈感源自 Web Components 規(guī)范草案，將 <slot> 元素作為承載分發(fā)內(nèi)容的出口......
vue2插槽和vue3插槽基本概念是一致的蛇尚，也是匿名插槽芽唇、具名插槽、作用域插槽三種取劫，只是基礎(chǔ)語法有一些區(qū)別匆笤。
下面讓我們溫習一下插槽的常用基礎(chǔ)知識點。
匿名插槽
Vue2案例:
<!-- 子組件 child-component -->
<template>
<div>
<slot></slot>
</div>
</template>
<!-- 父組件使用匿名插槽組件 child-component -->
<template>
<child-component>
<p>這是默認插槽的內(nèi)容哈哈哈</p>
</child-component>
</template>
Vue3案例:
<!-- 子組件child-component -->
<template>
<div>
<slot></slot>
</div>
</template>
<!-- 父組件使用插槽組件 child-component -->
<template>
<child-component>
<template v-slot>
<p>這是默認插槽的內(nèi)容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>
作用域插槽
作用域插槽日称仔埃可能使用的很少炮捧，但是某些場景用起來還是很方便的〉胍可以簡單的理解為 作用域插槽允許父組件訪問子組件內(nèi)部的數(shù)據(jù)咆课，并基于這些數(shù)據(jù)渲染內(nèi)容。
Vue2案例:
<!-- 子組件child-component返回給父級組件user數(shù)據(jù) -->
<template>
<div>
<slot :user="user"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: '張三000' }
}
}
}
</script>
<!-- 父組件使用child-component 扯俱，并獲取到子組件返回的 user數(shù)據(jù)-->
<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>
