Vue文件：slots的使用時機, 運用

vue vue3

relife12345 2025-11-18 17:37:50 ‧ 687 瀏覽

一、使用時機：slots通常使用在以下情境：

簡言之：子元件不變，改父元件來達成動態顯示的差異

二、父元件說明：

複雜的情況時，多用子層<MyChild>包住<template>包住顯示內容{{ text num }}，3層級來呈現。slot內容寫在<template>上面。
#head=”{ text, num}”可改寫
① v-slot:head=”{ text, num}”
② v-slot:head=”obj” 取值時，要 {{ obj.text obj.num }}

三、父層子層對照表：

父層工具	父層工具使用地方	子層工具	子層工具使用地方
v-slot or #	html attr	<slot>	html tag
		name	html attr
		$slots	程式碼表達式，寫在<slot>外層的html tag的v-if裡，決定顯不顯示

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

立即登入留言

IT邦幫忙