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 刀片中将 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
);

除了行和数据元素之外的所有内容都会被渲染，并且表格会变形。这是在浏览器中呈现后的表格内容和元素：

table elements in browser picture

我已经阅读了在线文章并通过 Q/As 进行了搜索，但没有找到任何东西。

Answer 1

官方文档DOM Template Parsing Caveats中有提到

也请参阅此问题以更清楚地了解https://github.com/vuejs/Discussion/issues/204