1.組件
組件（Component）是 Vue.js 最強(qiáng)大的功能之一你辣。
組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼维雇。
組件同樣分為全局組件和局部組件
全局組件:component("組件名",{template:代碼塊 })
局部組件:components:{"組件名":{template:代碼塊 } }
注意:1.組件名不可以使用已經(jīng)存在的html元素埃叭。2.組件中的data是一個函數(shù)派任，并有返回值
組件的練習(xí)
<div class="add">
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
template:`
<div>
<p>{{msg}}</p>
<button @click="fun">哈哈</button> //在組件中可以加入vue的一些指令
</div>
`,
data:function(){ //在組件中的data數(shù)據(jù)是一個函數(shù)砸逊，并加入返回值
return{
msg:"下課了"
}
},
methods:{ //點(diǎn)擊時觸發(fā)這個函數(shù)
fun:function(){
alert("哈哈")
}
}
}
)
new Vue({
el:".add",
})
</script>
2.組件之間的傳值
分為3類：
1.父給子傳 用屬性傳 props:["定義屬性"]；
2.子給父傳 用事件傳
3.同級之間的傳值
傳值練習(xí)(父給子傳)
<div class="add">
<my-father></my-father>
</div>
<script>
Vue.component("my-father",{
template:`
<div>
<my-tit v-bind:tit="title"></my-tit> //在這里進(jìn)行綁定掌逛，綁定到了data中的title值
<my-name v-bind:names="name"></my-name>
</div>
`,
data:function(){
return{
name:["蘋果","香蕉","橘子"],
title:"水果店"
}
}
})
Vue.component("my-tit",{
props:["tit"], //使用props定義了一個新的屬性师逸，將這個屬性綁定到這個組件上
template:`
<h3>{{tit}}</h3> //這個tit的新屬性在父及組件中進(jìn)行綁定,綁定什么數(shù)據(jù)輸出什么
`
})
Vue.component("my-name",{
props:["names"],
template:`
<ul>
<li v-for="value in names">{{value}}</li> //在組件中可以進(jìn)行vue的指令操作
</ul>
`
})
new Vue({
el:".add"
})
</script>
