VueJs组件未被模板替换

Question

当尝试呈现组件时，模板字符串呈现的不是HTML中定义的组件。相反，呈现的HTML是在我的<table>之外呈现的。

描述这一点最简单的方法是使用下面的代码片段。Column 2完全出现在<table>之外，即使我在<th>Column 1</th>之后直接有<my-th></my-th>。

为什么会发生这种情况？

Vue.component('my-th', {
props: [],
template: `<th>Column 2</th>`
});
new Vue({
el: "#app"
});

body { background: white; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th>Column 1</th>
<my-th></my-th><!-- Column 2 -->
</tr>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</tbody>
</table>
</div>

Answer 1

在这种情况下，您需要使用Vue的特殊is属性。

浏览器将在Vue接近HTML之前解析HTML，并且表中任何不在其应有位置的元素都将被移出。浏览器不知道my-th是什么，所以它将它移到table之前。

这是HTML中定义的模板的一个问题，在HTML中，浏览器将首先对其进行解析。对于指定模板的各种其他方式，这不是问题，因为Vue可以看到模板的原始形式

请参阅https://v2.vuejs.org/v2/guide/components.html#DOM-有关详细信息，请参阅模板分析注意事项。

Vue.component('my-th', {
props: [],
template: `<th>Column 2</th>`
});
new Vue({
el: "#app"
});

body { background: white; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th>Column 1</th>
<th is="my-th"></th><!-- Column 2 -->
</tr>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</tbody>
</table>
</div>