组件是可复用的 Vue 实例，且带有一个名字
示例：
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
//组件模板中必须有一个根元素(父元素)
//全局组件 和Vue同级
Vue.component('my-component',{
template:<div> <h1>嗨</h1> <a href='#'>嘿</a> <h2>哈</h2> </div>
})
new Vue({
el:'#app'
})
</script>
//局部组件 在Vue实例中
<script>
new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
//局部组件
components:{
'my-component':{
template:
<div> <p> <a href='#'>百度</a> </p> </div>
}
}
})
</script>
在Vue实例中data写法是
new Vue({
el:'#app',
data:{
message:''
}
})
但是在组件中data必须是一个函数，data中的值还要return
Vue.component('my-component',{
data:function(){
return{
name:'123'
}
}
})
组件传值（父子间传值） 谁在谁中显示，显示的元素就是父元素，传值用props:['']
<div id="app">
<father></father>
</div>
Vue.component('father',{
template:
<div> <h1>这是父元素</h1> <child v-bind:number='num'></child> <button @click='jia'>点击</button> </div>,
data:function(){
return{
num:1
}
},
methods:{
jia:function(){
this.num++
}
}
})
Vue.component('child',{
props:['number'],
template:
//a标签不能直接获取num的值，显示在父元素中的子元素绑定了子元素中的number元素=num
`
<div>
<p>这是子元素</p>
<a href='#'>{{number}}</a>
</div>
`
})
new Vue({
el:'#app'
})
body：
<div id="app">
<cont></cont>
</div>
js:
<script>
Vue.component('cont',{
template:
<div> <input type='text' v-model='arrs'> <button @click='tj'>添加</button> <z v-bind:number='arr'></z> </div>,
data:function(){
return{
arr:['banana','apple','orange'],
arrs:''
}
},
methods:{
tj:function(){
this.arr.push(this.arrs)
}
}
})
Vue.component('z',{
props:['number'],
template:
`
<ul>
<li v-for='(value,index) in number'>{{value}}
<button @click='sc'>删除</button>
</li>
</ul>
`,
methods:{
sc:function(index){
this.number.splice(index,1)
}
}
})
new Vue({
el:'#app'
})
</script>
<div id="app">
<cont></cont>
</div>
<script>
Vue.component('cont',{
template:
<div> <h1>这是父元素</h1> <top-title v-bind:sglb='tit'></top-title> <list v-bind:listfruit='fruit'></list> </div>,
data:function(){
return{
fruit:['apple','banana','orange'],
tit:'水果列表'
}
}
})
Vue.component('top-title',{
props:['sglb'],
template:
`
<div>
<h1>{{sglb}}</h1>
</div>
`
})
Vue.component('list',{
props:['listfruit'],
template:
`
<ul>
<li v-for='value in listfruit'>{{value}}</li>
</ul>
`
})
new Vue({
el:'#app'
})
</script>
