VUE 解析DOM 模板时的注意事项!

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。 这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
  <blog-post-row></blog-post-row>
</table>

这个自定义组件 <blog-post-row>

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

  <!-- blog-post-row 组件 -->
  <table>
    <tr is="blog-post-row"></tr>
  </table>
vuejs
78 views
Comments
登录后评论
Sign In
·

vue3.x 就不用这么麻烦了，<template> 支持 Fragments 写法：

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>