基本示例
全局组件
<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:'父组件内容'
}
})
结果: