从自定义表格槽中删除了 THEAD、TBODY、TR HTML 元素

Question

我正在尝试学习 VueJS。我还处于初级水平，所以请原谅任何误解。

我有一个.vue 文件，它呈现一个自定义表格元素。

<template>
    <table v-bind:class="classes">
        <slot></slot>
    </table>
</template>

<script>
    export default {
        data() {
            return {
                styles: {
                    separator: 'separator',
                    solid: 'bg',
                    bg: 'bg'
                }
            };
        },
        props: {
            type: { default: 'separator' },
            theme: { default: 'primary' }
        },
        computed: {
            classes: function () {
                return `table m-table m-table--head-${this.styles[this.type]}-${this.theme}`;
            }
        }
    }
</script>

在我试图创建模板的 HTML 文件中，它看起来像这样：

<custom-table type="solid" theme="primary">
    <thead>
        <tr>
            <th>Column 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
        </tr>
    </tbody>
</custom-table>

但是当页面渲染时，<slot>中的所有html都被剥离掉了，只剩下文字了：

如果我调用$vm0.$slots.defaults[0].elm，我得到的只是text，没有HTML，没有<thead> 等等。

我在网上搜索了vuejs2 stripping out html from slots，但找不到任何与为什么发生这种情况有关的信息。

我知道我的.vue 文件目前可能并不完美，我只是想了解一些基础知识。

感谢任何帮助，指出我为什么要剥离 HTML（或其他可能的内容）的正确方向。

Answer 1

这是由于 HTML 中的限制：子表（如 <thead>、<tr> 等）只能出现在 <table> 中，即使对于自定义元素也是如此。

使用自定义表格的官方解决方法是使用HTML属性is，Vue支持：

<table is="custom-table" type="solid" theme="primary">
    <thead>
        <tr>
            <th>Column 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
        </tr>
    </tbody>
</table>

见vue.js: what's the difference between <component :is="comp-name"/> and <div :is="comp-name"/>?