1、is属性

根据HTML规范,<table>、<ul>、<ol>、<select>等元素只能包含特定元素,当模板标签在使用有限制性的元素,在渲染时就会出现bug。如下例所示:

    <div id="root">
        <table>
            <tbody>
            <row></row>
            <row></row>
            <row></row>
            </tbody>
        </table>
    </div>
    <script>
        Vue.component('row',{
            template: '<tr><td>this is a row</td></tr>'
        })
        var vm=new Vue({
            el: "#root"
        })
    </script>

渲染结果如下: 

 渲染完成后,tr元素放在了table元素的外部。因为tbody元素内部只能放tr标签,上例在t<able>内部写了<row>标签就会引发bug。引入is属性后上例中DOM部分可以这样写

 <table>
        <tbody>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
        </tbody>
        </table>

这样,便可以正确的渲染: 

2、在子组件里面定义data时,data必须是一个函数,不能是一个对象。这是为了保证每个子组件都有独立的data数据。

 如下例:

   <div id="root">      
        <row></row>
        <row></row>
        <row></row>

    </div>
    <script>
        Vue.component('row',{
            data: {
                msg: "hello world"
            },
            template: '<p>{{msg}}</p>'
        })
        var vm=new Vue({
            el: "#root"
        })
    </script>

浏览器会报错:

子组件的data应该这么写:

  data: function () {
                    return {
                         msg: "hello world"
                    }
            },

此时,浏览器能正确显示 

 

Logo

前往低代码交流专区

更多推荐