组件 - 特殊标签结构 - 《vue》

is属性可以使html原生标签转化成vue组件
<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        在html标签结构中, 有一些特殊标签结构是不能正确渲染的, 
        例如: p标签中嵌套div, a标签中嵌套a标签, button嵌套button, tabel中嵌套非tr
        <p>p <div>div</div> </p>
        <a href="#">a1 <a href="#">a2</a> </a>
        <button>button1 <button>button2</button> </button>
        <table> <span>span</span> </table>
        以上标签结构在渲染时,会产生结构错乱, 不按照书写的结构渲染, 详见查看器 <br>
        所以如果子组件和父组件标签结构不匹配时,会造成渲染异常, 如下所示
        <table>
            <my-com v-for="item in 3"></my-com>
        </table>
        <!-- 此时我们把myCom中的根标签换成tr, tr依然被渲染到tabel外了, 
        原因: 标签渲染之前存在两个解析过程 1, 浏览器内核先把标签结构解析到缓存,再次过程中判断标签结构是否符合要求,  2, vue内核把组件结构解析成组件模板中的标签结构,   解析1早于解析2, 浏览器先把my-com移出tabel, 然后vue把my-com解析成tr -->
        <!-- 解决: tabel中暂时先写tr, 经过第一步解析,浏览器会把tr保留在tabel内, 第二步解析, vue内核会通过is属性把tr装化成目标组件myCom -->
        <table>
            <tr is="my-com" v-for="item in 3"></tr>
        </table>
        <div is="my-com"></div>
    </div>
    <!-- 组件模板 -->
    <template id='myTem'>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
    </template>
    <script>
        Vue.component('myCom', {
            template: '#myTem',
            data(){ 
                return{
                }
            }
        })
        new Vue({
            el: '#myApp',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>