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>限制了哪些元素可以在其中显示，以及某些元素，例如{{1 }}，<li>和<tr>只能出现在某些其他元素中。

使用具有此类限制的元素的组件时，这将导致问题。例如：
<option>
自定义组件<table> <blog-post-row></blog-post-row> </table>将被取消为无效内容，导致最终渲染输出中的错误。幸好， <blog-post-row>特殊属性提供了一种解决方法：
is

您需要使用<table> <tr is="blog-post-row"></tr> </table>属性添加组件，如下所示。

is

请参阅https://jsfiddle.net/7v6yrf3x/1/。

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

1 个答案: