Vue 动态组件 is 的一个小应用

一、遇到了什么问题？

举个栗子：

<div id="app">
    <table>
        <tbody>
            <row></row>
            <row></row>
            <row></row>
            <row></row>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    var row = {
        template: '<tr><td>Hello World</td></tr>',
    };

    var vm = new Vue({
        el: '#app',
        components: {
            row,
        },
    });
</script>

看上去没什么问题：

但是打开控制台我们就能看到：

发现子组件没有被包在<tbody>里面，这是因为根据 html 的规则 tbody 里面是放 <row> 他识别不出来，不是他熟悉的，所以会出现这种情况，解决方案就是设置动态组件

<div id="app">
    <table>
        <tbody>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    var row = {
        template: '<tr><td>Hello World</td></tr>',
    };

    var vm = new Vue({
        el: '#app',
        components: {
            row,
        },
    });
</script>

通过 is 设置动态组件就行了

is 设置 被叫做动态组件，也是因为你可以修改 is 的属性值来切换组件，很实用。