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