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