组件是可复用的 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:['']
<!-- 父子间传值 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'
})
案例一：删除
效果图：
QQ截图20180918152650.png
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>
案例二：
QQ截图20180918153213.png
<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>