23、Vue3 解析 DOM 模板时的注意事项

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

    <table>
        <tabcmp></tabcmp>
    </table>

这个自定义组件 <tabcmp> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 v-is attribute 给了我们一个变通的办法：

    <table>
        <tr v-is="'tabcmp'"></tr>
    </table>

v-is 值应为 JavaScript 字符串文本：，在vue2中也是一样处理

完整案例

• src/components/tabcmp.vue

<template>
 <tr>
     <td>单元格1</td>
     <td>单元格2</td>
     <td>单元格3</td>
 </tr>
</template>

<script>
export default {
    name: 'tabcmp'
}

</script>

• demo.vue

<!--  -->
<template>
  <div>
    <table>
        <tr v-is="'tabcmp'"></tr>
    </table>
  </div>
</template>

<script>
import tabcmp from '/@/components/tabcmp.vue'
export default {
    components: {
        tabcmp
    }
}

</script>