vue.js：<component：is =“comp-name”>和<div：is =“comp-name”>之间有什么区别？

Question

在vue中使用动态组件时，我们可以使用component或html标记（例如div）作为标记名称：

<component :is="comp-name"></component>

或：

// assume that the root tag of comp-name is div
<div :is="comp-name"></div>

那么两种方式有什么区别？是一样的吗？

Answer 1

“is”属性不是特定于Vue的，它来自自定义元素规范。

另见What is HTML "is" attribute?

但显然Vue必须自己实现它的编译，模仿Custom Element规范。

在您显示的示例中，我想这无关紧要，因为在两种情况下，标记（<component>或<div>）都将被Vue组件实例替换。这是使用is属性在几个可能的组件（“动态组件”）之间切换的典型情况。

然而，当您尝试在某些HTML元素中使用自定义元素/ Vue组件（使用运行时编译）时，它们会变得很重要，这些元素限制了它们可以拥有的子元素的类型，如Vue的DOM Template Parsing Caveats部分所述导：

  

某些HTML元素（例如<ul>，<ol>，<table>和<select>限制了哪些元素可以在其中显示，以及某些元素，例如{{1 }}，<li>和<tr>只能出现在某些其他元素中。

在这些情况下，<option>属性可能不会（仅）用于在动态组件之间切换，而是为了符合HTML限制（为了避免浏览器意外地对我们的自定义组件执行操作），同时仍然替换它们稍后由我们的自定义组件提供。

以下是is：

的快速演示

<table>

Vue.component('my-row', {
  template: '#my-row',
});

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

td,
th {
  border: 1px solid black;
}

结果：

• 在Firefox中，<script src="https://unpkg.com/vue"></script> <div id="app"> <table id="table1"> <tr> <th>Table</th> <td>1</td> </tr> <!-- Below Custom component will be stripped out of the table. Exact result may differ depending on browsers --> <my-row></my-row> </table> <hr /> <table id="table2"> <tr> <th>Table</th> <td>2</td> </tr> <!-- Valid TR row will be correctly replaced by Custom component --> <tr is="my-row"></tr> </table> </div> <template id="my-row"> <tr> <th>Header</th> <td>Cell</td> </tr> </template>标记在外面，在上面呈现<my-row>。
• 同样适用于Chrome。