文章目錄
- 默認插槽
- 具名插槽
- 作用域插槽
默認插槽
父組件中：<Category title="今日熱門游戲"><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></Category>
子組件中：<template><div class="item"><h3>{{ title }}</h3><!-- 默認插槽 --><slot></slot></div></template>
Category 這個標簽里面的ul 會傳到slot 里面
具名插槽
按照不同的名字插入到不同的插槽
父組件中：<Category title="今日熱門游戲"><template v-slot:s1><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></template><template #s2><a href="">更多</a></template></Category>
子組件中：<template><div class="item"><h3>{{ title }}</h3><slot name="s1"></slot><slot name="s2"></slot></div></template>
作用域插槽
-
理解：數據在組件的自身，但根據數據生成的結構需要組件的使用者來決定。（新聞數據在
News組件中，但使用數據所遍歷出來的結構由App組件決定） -
具體編碼：
就是數據在卡槽內部，你要調用卡槽內部的數據 你需要怎么辦
父組件中：<Game v-slot="params"><!-- <Game v-slot:default="params"> --><!-- <Game #default="params"> --><ul><li v-for="g in params.games" :key="g.id">{{ g.name }}</li></ul></Game>子組件中：<template><div class="category"><h2>今日游戲榜單</h2><slot :games="games" a="哈哈"></slot></div></template><script setup lang="ts" name="Category">import {reactive} from 'vue'let games = reactive([{id:'asgdytsa01',name:'英雄聯盟'},{id:'asgdytsa02',name:'王者榮耀'},{id:'asgdytsa03',name:'紅色警戒'},{id:'asgdytsa04',name:'斗羅大陸'}])</script>
