iT邦幫忙

0

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

vue vue3
relife12345 2025-11-18 17:37:50 ‧ 646 瀏覽

  • 分享至 

  • xImage
    •  

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

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

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

https://ithelp.ithome.com.tw/upload/images/20251118/20167101Ij8hToAXrs.jpg

二、父元件說明：

  1. 複雜的情況時，多用子層<MyChild>包住<template>包住顯示內容{{ text num }}，3層級來呈現。slot內容寫在<template>上面。
  2. #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 }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19835 篇
完賽人數
528 人
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙