更新 Vue 至 3.4.4後 slot 異常問題

今天將專案的 Vue 更新至 3.4.4 後，遇到了個神奇的問題，就是 slot 的部分，會直接把 html 印在畫面上，而沒有經過render。

使用 Title Component 並放入一個按鈕，正常來說會在 render 在 slot 的位置。

執行後畫面

使用 Title Component：

<Title :title="t('## 查看訂單')">
    <v-btn variant="outlined" color="primary" @click="toCreateOrder">
        <v-icon>mdi-plus</v-icon>
        <span>{{ t('## 建立訂單') }}</span>
    </v-btn>
</Title>

Title Component :

<template>
    <div class="my-4">
        <v-row :class="padding === '' ? 'pa-5 pb-1' : padding" no-gutters align="center">
            <div class="text-primary text-h5 font-weight-bold" :class="`text-${heading}`">
                {{ title }}
            </div>
            <slot></slot>
        </v-row>
        <v-divider class="mt-4"></v-divider>
    </div>
</template>

經過一些測試後，發現把 component 名稱改掉 Title to TitleBlock，問題就解決了。

修改 Title to TitleBlock：

<TitleBlock :title="t('## 查看訂單')">
    <v-btn variant="outlined" color="primary" @click="toCreateOrder">
        <v-icon>mdi-plus</v-icon>
        <span>{{ t('## 建立訂單') }}</span>
    </v-btn>
</TitleBlock>

按鈕已被正常 render：

執行後畫面

可能是升級後產生的 Bug ，而查詢一下官方升級指南，並沒有發現有將 tilte 去做特別的保留用途，搜尋 Github Issues ，目前也還沒有看到相關訊息，所以就先用修改 component name 的方法處理，待日後改版再試試看，提供給大家參考。