vue.js：<component :is="comp-name"/> 和 <div :is="comp-name"/> 有啥区别？

Posted 2023-02-22

【中文标题】vue.js：<component :is="comp-name"/> 和 <div :is="comp-name"/> 有啥区别？

【英文标题】：vue.js: what's the difference between <component :is="comp-name"/> and <div :is="comp-name"/>?vue.js：<component :is="comp-name"/> 和 <div :is="comp-name"/> 有什么区别？

【发布时间】：2018-11-10 03:43:55

【问题描述】：

在vue中使用动态组件时，可以使用component或html标签如div作为标签名：

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

或：

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

那么这两种方式有什么区别呢？一样吗？

【问题讨论】：

vuejs.org/v2/api/#is

【参考方案1】：

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

另见What is HTML "is" attribute?

但显然 Vue 必须自己实现它以进行编译，模仿自定义元素规范。

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

但是，当您尝试在一些限制它们可以拥有的子元素类型的 HTML 元素中使用自定义元素/Vue 组件（通过运行时编译）时，它开始变得重要，如 Vue 指南的DOM Template Parsing Caveats 部分所述：

某些 HTML 元素，例如 <ul>、<ol>、<table> 和 <select> 对其中可以出现的元素有限制，而某些元素例如 <li>、<tr> 和 @987654334 @ 只能出现在某些其他元素中。

在这些情况下，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 中相同。

【讨论】：

知道了。在你所说的特殊情况下，它们是不同的

请注意，如果您使用 vue-template 文件， 组件将呈现在您期望的位置（作为普通的表格行）。