上篇文章 【Vue】Vue3.0（二十五）Vue3.0中的具名插槽 的概念和使用場(chǎng)景

🏡作者主頁(yè)：點(diǎn)擊！

🤖Vue專欄：點(diǎn)擊！

??創(chuàng)作時(shí)間：2024年11月20日17點(diǎn)30分

概念

在Vue 3.0中，作用域插槽是一種特殊的插槽，它允許子組件向父組件傳遞數(shù)據(jù)，使得父組件在使用插槽時(shí)能夠訪問和使用子組件中的數(shù)據(jù)。通過作用域插槽，父組件可以根據(jù)子組件提供的數(shù)據(jù)來動(dòng)態(tài)地渲染插槽內(nèi)容，從而實(shí)現(xiàn)更靈活的組件組合和數(shù)據(jù)傳遞。

使用場(chǎng)景

• 數(shù)據(jù)驅(qū)動(dòng)的組件渲染：當(dāng)子組件內(nèi)部有一些數(shù)據(jù)，需要根據(jù)這些數(shù)據(jù)在父組件中進(jìn)行不同的展示或處理時(shí)，作用域插槽就非常有用。例如，一個(gè)列表組件，子組件負(fù)責(zé)獲取和管理列表數(shù)據(jù)，而父組件則根據(jù)列表項(xiàng)的不同屬性來決定如何展示每個(gè)列表項(xiàng)，這時(shí)就可以使用作用域插槽將列表項(xiàng)數(shù)據(jù)傳遞給父組件進(jìn)行定制化渲染。
• 組件的靈活擴(kuò)展：在開發(fā)可復(fù)用組件時(shí)，作用域插槽可以讓組件的使用者根據(jù)自己的業(yè)務(wù)需求對(duì)組件進(jìn)行靈活擴(kuò)展。比如一個(gè)通用的表格組件，子組件提供表格的數(shù)據(jù)和基本結(jié)構(gòu)，父組件通過作用域插槽可以根據(jù)不同的列數(shù)據(jù)進(jìn)行特殊的格式化或添加額外的操作按鈕等，而無需修改表格組件的內(nèi)部邏輯，提高了組件的復(fù)用性和可擴(kuò)展性。

示例

以下是一個(gè)使用作用域插槽的示例，包含一個(gè)List組件和使用該組件的父組件：

• List組件

<template><div class="list"><ul><li v-for="item in items" :key="item.id"><slot :item="item">{{ item.name }}</slot></li></ul></div>
</template><script setup lang="ts">
import { defineComponent, reactive } from 'vue';const items = reactive([{ id: 1, name: '蘋果', price: 5 },{ id: 2, name: '香蕉', price: 3 },{ id: 3, name: '橙子', price: 4 },
]);export default defineComponent({setup() {return {items,};},
});
</script><style scoped>
.list {background-color: lightgray;padding: 10px;border-radius: 5px;
}ul {list-style-type: none;padding: 0;
}li {margin-bottom: 5px;padding: 5px;border-radius: 3px;background-color: white;
}
</style>

在List組件中，通過:item="item"將列表項(xiàng)item對(duì)象作為屬性傳遞給了插槽，這就定義了一個(gè)作用域插槽。子組件內(nèi)部有一個(gè)items數(shù)組，包含了一些水果的信息，每個(gè)列表項(xiàng)都有id、name和price屬性。

• 父組件使用List組件

<template><div><h2>作用域插槽示例</h2><List><template v-slot="{ item }"><span>{{ item.name }}</span> - <span>價(jià)格: {{ item.price }}</span></template></List></div>
</template><script setup lang="ts">
import List from './List.vue';
import { defineComponent } from 'vue';export default defineComponent({components: {List,},
});
</script>

在父組件中，使用<template v-slot="{ item }">接收了子組件傳遞過來的item對(duì)象，然后根據(jù)item對(duì)象的name和price屬性來定制化地渲染每個(gè)列表項(xiàng)的內(nèi)容。這樣，父組件就可以根據(jù)子組件提供的數(shù)據(jù)進(jìn)行靈活的展示，而無需修改子組件的內(nèi)部邏輯。

通過這個(gè)例子可以看出，作用域插槽使得子組件和父組件之間的數(shù)據(jù)傳遞和交互更加靈活，能夠滿足各種復(fù)雜的業(yè)務(wù)需求，提高了組件的復(fù)用性和可維護(hù)性。

再來個(gè)例子

效果：

代碼：
Father.vue:

<template><div class="father"><h3>父組件</h3><div class="content"><Game><template v-slot="params"><ul><li v-for="y  in params.youxi" :key="y.id">{{y.name}}</li></ul></template></Game><Game><template  v-slot="params" ><ol><li v-for="item in params.youxi" :key="item.id">{{item.name}}</li></ol></template></Game><Game><template v-slot="{youxi}"><h3 v-for="item in youxi" :key="item.id">{{item.name}}</h3></template></Game></div></div>
</template><script setup lang="ts" name="Father">
import Game from './Game.vue'
</script><style scoped>
.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;
}.content {display: flex;justify-content: space-evenly;
}img,
video {width: 100%;
}
</style>

Game.vue:

<template><div class="game"><h2>游戲列表</h2><slot :youxi =games x="哈哈" y="你好"></slot></div>
</template><script setup lang="ts" name="Game">
import { reactive } from 'vue'
let games = reactive([{ id: 'asgytdfats01', name: '英雄聯(lián)盟' },{ id: 'asgytdfats02', name: '王者農(nóng)藥' },{ id: 'asgytdfats03', name: '紅色警戒' },{ id: 'asgytdfats04', name: '斗羅大陸' }
])
</script><style scoped>
.game {width: 200px;height: 300px;background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;
}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;
}
</style>