Vue JS - <tr> 、 <td> 元素傳遞到表格元件時未渲染

Question

我已經使用 vue.js 註冊了一個檔案表元件：

<template>
        <div>
            <table class="table border">
                <thead>
                    <tr>
                        <td>header 1</td>
                        <td>header 2</td>
                    </tr>
                </thead>
                <tbody>
                    <slot></slot>
                </tbody>
            </table>
        </div>
    </template>
    
    <script>
    export default {};
    </script>
    <style></style>

我想將它用作代表性組件。當我嘗試在 Laravel Blade 中將 tr 和 td 元素傳遞給它時，如下所示：

<table-component>
                <tr>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
</table-component>

我如何註冊元件：

Vue.component(
    "table-component",
    require("./components/admin/TableComponent.vue").default
);

除了行和資料元素之外的所有內容都會被渲染，並且表格會變得不規則。這是在瀏覽器中呈現後的表格內容和元素：

瀏覽器圖片中的表格元素

我閱讀了在線文章並通過 Q/As 進行了搜索，但沒有找到任何內容。

Answer 1

官方文件中有提到 DOM 範本解析注意事項

#為了更清楚起見，請另參閱此問題 https://github.com/vuejs/Discussion/問題/204