Vuejs 不会在 HTML 表格元素中呈现组件

Question

我想渲染一个在表格中显示一行的自定义组件。

我有以下代码：

// js file
Vue.component('message-row', {
    data: function () {
        return {
            msg: 'Hello'
        }
    },
    template: '<tr><td>{{ msg }}</td></tr>'
});

new Vue({
  el: '#app'
});


// html file
<div id="app">
    <table><message-row></message-row></table>
</div>

问题是该行最终呈现在表格之外！像这样：

<div id="app">
    <tr><td>Hello</td></tr>
    <table></table>
</div>

您可以在此 JSFiddle https://jsfiddle.net/eciii/7v6yrf3x/ 中查看它

我不确定这是一个错误还是我只是在这里遗漏了一些非常明显的东西......

Answer 1

查看 Vue.js 关于DOM Template Parsing Caveats 的文档：

某些 HTML 元素，例如 <ul>、<ol>、<table> 和 <select> 对其中可以出现的元素有限制，而某些元素例如 <li>、<tr> 和 @987654329 @ 只能出现在某些其他元素中。

当使用具有此类限制的元素的组件时，这将导致问题。例如：

<table>
  <blog-post-row></blog-post-row>
</table>

自定义组件<blog-post-row> 将被吊出为无效 内容，导致最终呈现的输出出现错误。幸运的是， is 特殊属性提供了一种解决方法：

<table>
  <tr is="blog-post-row"></tr>
</table>

您需要使用is 属性添加组件，如下所示。

<table><tr is="message-row"></tr></table>

见https://jsfiddle.net/7v6yrf3x/1/。