vue.js实战 第一篇 第七章 组件详解_组件与复用

全局注册组件

<div id="app">
    <my-component></my-component>
</div>
<script>
    Vue.component('my-component',{
        template:'<div>content</div>'
    });
    var app=new Vue({
        el:'#app'
    })
</script>

注意：template的DOM结构必须被一个元素包含。

局部注册

<script>
    var Child={
        template:'<div>content</div>'
    }
    var app=new Vue({
        el:'#app',
        component:{
            'my-component':Child
        }
    }
})

组件受到HTML标签的限制，如table,ul,ol,select等，处理办法使用特殊的is属性来挂载组件：

<div id="app">
    <table>
        <tbody is="my-component"></tbody>
    </table>
</div>

注意：字符串模板不受限制。

组件像vue实例那样，也可使用其他的选项，如data，computed，methods等，data稍有区别，data必须是函数，return出去。

<script>
    Vue.component('my-component',{
        template:'<div>{{message}}</div>',
        data:function(){
            return{
                message:'组件内容'
            }
        }
    });
    var app=new Vue({
        el:'#app'
    })
</script>

注意：js的对象是引用关系，如果return出的对象引用了外部的一个对象，那这个对象是共享的，会同步改变。