Vue文件：slots的使用時機, 運用 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

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

vue vue3

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

分享至

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

子元件寫好固定不變的html架構，父元件決定要動態改變的html。
子元件封裝共通程式碼邏輯(composables)，子元件輸出的變數ref，曝露給父元件來呈現。套件很容易看到這種方式。

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

二、父元件說明：

複雜的情況時，多用子層<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.subject }}

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

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

19856 篇

完賽人數

528 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react

IT邦幫忙