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

一：Vue.component中的template属性规则：
  • 错误写法：

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

  • 带来的问题：读取模板定义的值时，只能读取到一对<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标签；
受限制的
<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组件的运行原理：

未知，欢迎补充，本人第一天看Vue；

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容