vue入门实例三,组件

<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <component-a></component-a>
</div>
//定义button-counter组件
    Vue.component('button-counter',{
        //定义数据
        data:function(){
            return {
                count: 0
            }
        },
        //定义方法
        methods:{
            clickAdd: function(){
                this.count++
            }
        },
        template:'<button @click="clickAdd">You clicked me {{count}} times</button>'
    })

//component-a是一个全局组件
Vue.component('component-a',{
    template:'<div><p>这里是全局组件</p><component-b></component-b></div>',
    //使用components在父组件中注册局部组件
    components:{
        'component-b': {
            template:'<button>这是一个局部组件</button>'
        },
    }
})
new Vue({
    el: "#app"
})

结果:我们定义了全局与局部组件

260 total views, 6 views today

Revisions

No comments yet.

发表评论