一.組件介紹
1.什么是組件
在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下柱蟀，組件也可以表現(xiàn)為用is特性進(jìn)行了擴(kuò)展的原生 HTML 元素。
2.在頁面中有什么組件
1.實(shí)現(xiàn)基本功能的基礎(chǔ)的組件（最小的元素蚜厉，HTML元素）
2.可復(fù)用的邏輯組件（業(yè)務(wù)組件）
頁面上所有的東西全都是組件：形成了組件樹
二.組件的使用
1.全局組件的使用
1.先創(chuàng)建一個(gè)vue實(shí)例
var vm = new Vue({
//選項(xiàng)
})
2.vm.components("mycompunent",選項(xiàng)})；
3.在頁面中使用標(biāo)簽
<mycomponent></mycomponent>
1.局部組件
child={
? template:""
}
var vm=new Vue({
components:{
? ?child
}
})
三.組件選項(xiàng)解釋
首先畜眨，一個(gè)組件的寫法
var mycompo={
template:"",
props://多種寫法
data(){},
compunents:{}
methods:{},
watch:{},
computed:{}
directives:{}
}
1.template：組件包含的內(nèi)容
template:"<div></div>"
組件內(nèi)容要寫模板里面昼牛，最外面要是一個(gè)也只能是一個(gè)html標(biāo)簽，替他內(nèi)容寫在該標(biāo)簽里面
2.compnents：組件里面的組件
compnents:{
AllCi
}
注意1：因?yàn)閔tml表現(xiàn)里面是不分大小寫康聂，若果這里寫成駝峰形式贰健，那么用的時(shí)候?qū)懗煽救獯问剑?/p>
注意2：除了vue實(shí)例上注冊(cè)是組件在頁面上寫標(biāo)簽調(diào)用，其他組件的組件內(nèi)容都要寫在template模板里
3.data(){}：組件中的數(shù)據(jù)項(xiàng)
data(){
? ?return {
? ?name:"strugglexiang"
}
}
這里寫成一個(gè)方法的形式恬汁，調(diào)用直接使用函數(shù)返回的對(duì)象中 的屬性伶椿，如{{name}}，這樣寫的話組件就能復(fù)用氓侧，每個(gè)組件
操作自己的data項(xiàng)脊另，不然組件復(fù)用的話就操作的是同一個(gè)對(duì)象。
4.props：使用props傳遞數(shù)據(jù)
1.數(shù)組形式
props:["ownmsg","parentmsg"]
接收標(biāo)簽的中的屬性做為本組件的屬性约巷，可以直接作為數(shù)據(jù)項(xiàng)被使用偎痛，但是props里面接收的數(shù)據(jù)不能更改
例：
{{ownmsg}}{{parentmsg}}
如果要操作props里面的屬性，可以先放在data里独郎，如下
data() { return { childCounter: this.initCounter } }
也可以放在計(jì)算屬性里面,然后就可以操作計(jì)算屬性踩麦，一般來說是獲取
computed:{
? ?normalSize() {return this.size.trim().toLowerCase();}
}
2.對(duì)象形式枚赡，可以用來驗(yàn)證接收的數(shù)據(jù)類型，不符合句報(bào)錯(cuò)
Vue.component('example', {
props: {
// 基礎(chǔ)類型檢測(cè) (`null` 指允許任何類型)
propA:Number,
// 可能是多種類型
propB: [String,Number],
// 必傳且是字符串
propC: {
type:String,
required:true
},
// 數(shù)值且有默認(rèn)值
propD: {
type:Number,
default:100
},
// 數(shù)組/對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
propE: {
type:Object,
default:function(){
return{message:'hello'}
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator:function(value){
returnvalue >10
}
}
}
})
