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

看官方文档时，这句话真的给我搞懵逼了 ，成功触发程序员两大难题之一的，这个为什莫行，看图：

这条限制是什么，还有限制什么时间不存在，一头雾水。然后百度，奇奇怪怪的答案都有，就是没有正确答案，只好重新装上了谷歌插件，用谷歌了。

<div id="app">

    <!-- 方式一：直接在table下使用子组件,会出错，子元素跳级 tr 和 table 同级-->
    <table>
      <tr-item></tr-item>
    </table>
    <hr>

    <!--方式二:  is="" 的方式可以避开一些潜在的浏览器 **解析规则** ，正确渲染元素 -->
    <table>
      <tr is="tr-item"></tr>
    </table>

    <!-- 方式三：通过template字符串 -->
    <todo-three></todo-three>
    <hr>

    <!-- 方式四：通过<script type="text/x-template" id="todo-four"></script> -->
    <todo-four></todo-four>
  </div>
  <!-- 方式五：直接替换 -->
  <div id="aa"></div>

<script type="text/x-template" id="todo-four">
  <table><tr-item></tr-item></table>
</script>

<script>
    Vue.component('tr-item', {
      template: '<tr>通过控制台查看我是否正确渲染</tr>',
    });
    Vue.component('todo-four', {
      template: '#todo-four',
    });
    const vm = new Vue({
      el: '#app',
      components: {
        'todo-three': {
          template: '<table><tr-item></tr-item></table>',
        },
      },
    });
    const aa = new Vue({
      el: '#aa',
      template: '<table><tr-item></tr-item></table>',

    });

  </script>

错误如下：

说实话，能用谷歌还是谷歌吧！百度真的不好用，最后感谢一下大佬，我写这个博客只是为了记录一下自己找了大半夜答案，同时也防止自己忘了，其它基本借鉴大佬的 。大佬博客链接如下：（点赞请去大佬博客下面，骂人的请移步，讨论的可以留言，谢谢大家！！！）

https://blog.csdn.net/weixin_42287935/article/details/103765926