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模板解析警告的文档：

一些HTML元素，比如<ul>，<ol>，<table>和<select>有什么元素可以在其内部出现的限制，以及一些元素，如<li>，<tr>和<option>只能出现某些其他元素中。

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

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