Vue JS – <tr>-, <td>-Elemente werden nicht gerendert, wenn sie an die Tabellenkomponente übergeben werden

Question

Ich habe eine Dateitabellenkomponente mit vue.js registriert:

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

Ich möchte es als Darstellungskomponente verwenden. Wenn ich versuche, ihm in Laravel Blade tr- und td-Elemente wie folgt zu übergeben:

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

Wie registriere ich eine Komponente:

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

Alles außer Zeilen und Datenelementen wird gerendert und die Tabelle wird unregelmäßig. Hier sind der Tabelleninhalt und die Elemente nach dem Rendern im Browser:

Tabellenelemente in Browserbildern

Ich habe Online-Artikel gelesen und über Fragen und Antworten gesucht, aber nichts gefunden.

Answer 1

官方文档中有提到 DOM 模板解析注意事项

为了更清楚起见，另请参阅此问题 https://github.com/vuejs/Discussion/问题/204