Vue中的is属性，及子组件的data

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"
                    }
            },

此时，浏览器能正确显示