基本示例

全局组件

<div id="test1">
    <testa></testa>
    <testa></testa>
</div>

Vue.component('testa',{
    data:function(){
        return{
            count:0
        }
    },
    template:'<button v-on:click="count++">click了{{count}}次</button>'
})
new Vue({
    el:'#test1'
})

结果：

注意，data中需要返回一个函数

局部组件

<div id="test2">
    <test></test>
    <testa></testa>
</div>

var child={
    template:'<p>局部组件</p>'
}
new Vue({
    el:'#test2',
    components:{
        'test':child
    }
})

结果：

Prop示例

prop示例

<div id="test3">
    <blowsers name="chrome"></blowsers>
    <blowsers name="firefox"></blowsers>
    <blowsers name="edge"></blowsers>
</div>

Vue.component('blowsers',{
    props:['name'],
    template:'<p>{{name}}</p>'
})
new Vue({
    el:'#test3'
})

结果：

prop绑定数组

<div id="test3">
    <blowsers v-for="blowser in blowsers" v-bind:id="blowser.id" v-bind:blowser="blowser.blowser"></blowsers>
</div>

Vue.component('blowsers',{
    props:['id','blowser'],
    template:'<p>{{id}}:{{blowser}}</p>'
})
new Vue({
    el:'#test3',
    data:{
        blowsers:[
            {id:1,blowser:'chrome'},
            {id:2,blowser:'firefox'},
            {id:3,blowser:'edge'}            
        ]
    }
})

结果：

​

动态prop

<div id="test4">
    <div>
        <input v-model="parentMsg">
        <br>
        <child v-bind:message="parentMsg"></child>
    </div>
</div>

Vue.component('child',{
    props:['message'],
    template:'<p>{{message}}</p>'
})
new Vue({
    el:'#test4',
    data:{
        parentMsg:'父组件内容'
    }
})

结果：