Vue的component使用一点小小的心得

一：Vue.component中的template属性规则：

• 错误写法：

• 带来的问题：读取模板定义的值时，只能读取到一对<th></th>定义的name值。

• 一开始我还怀疑template不支持定义多个值(这句话总感觉有问题)
• 正确写法：

  Vue.component('tr-item',{
        props:['member'],
        template:'<tr><th>{{member.name}}</th>'+
        '<th>{{member.shoolnumber}}</th>'+
        '<th>{{member.major}}</th></tr>'
    })

二：Vue中使用组件后生成的DOM受到的HTML限制

• 受限制写法：

<table class="tableName" border="1px">
            <tr>
                <th>name</th>
                <th>school number</th>
                <th>major</th>
            
            </tr>
            <tr-item 
                v-for="student in memberinfo" 
                v-bind:member="student" 
                v-bind:key="student.id">
            </tr-item>
</table>

• 带来的问题：因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容，也就是说在table元素已经渲染完了之后才进行<tr-item></tr-item>的加载，然后就直接跑外面去了，不会进table标签；

• 规避方法，参考自Vue官方文档

<table class="tableName" border="1px">
            <tr>
                <th>name</th>
                <th>school number</th>
                <th>major</th>
            
            </tr>
            <tr is="tr-item" 
                v-for="student in memberinfo" 
                v-bind:member="student" 
                v-bind:key="student.id">
            </tr>
        </table>

• 效果如下：

  
  

  

三：Vue组件的运行原理：