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的,它来自自定义元素规范.

另请参见什么是HTML"is"属性？

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

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

但是,当您尝试在某些HTML元素中使用自定义元素/ Vue组件(使用运行时编译)时,它会变得很重要,这些元素限制了它们可以拥有的子元素的类型,如Vue指南的DOM模板分析警告部分所述:

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

在这些情况下,is属性可能不会(仅)用于在动态组件之间切换,而是为了遵守HTML限制(为了避免浏览器对我们的自定义组件出现意外行为),同时仍然由我们的自定义组件替换它们.

这是一个快速演示<table>:

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

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

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

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

结果:

• 在Firefox,所述<my-row>标签被渲染外部和上方的<table>.
• 同样在Chrome中.