laravel - Vue JS - 传递给表格组件时元素未呈现

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
);

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

浏览器图片中的表格元素

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

Answer 1

它在官方文档DOM Template Parsing Caveats中提到

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