組件用法
-
全局注冊(cè)
Vue.component('my-component', { //選項(xiàng) })缺點(diǎn)：權(quán)限太大劫流，容錯(cuò)率低
-
局部注冊(cè)
new Vue({ el: '#app', components: { 'my-component': { //選項(xiàng) } } })
注意事項(xiàng)
html不分大小寫，js區(qū)分大小寫
自定義標(biāo)簽名稱推薦小寫和減號(hào)分割的形式書寫
template的DOM結(jié)構(gòu)必須被元素包裹，純文本無法渲染
組件有時(shí)會(huì)受html的限制华蜒。像table內(nèi)規(guī)定只允許<tr>,<td>,<th>,可以使用特殊的'is'屬性來掛載。
<tbody is='my-component'></my-component>
組件跟實(shí)例一樣帶有data, methods, computed等屬性
組件的data屬性必須是函數(shù), rutrun出數(shù)據(jù)(這樣組件間的數(shù)據(jù)就是獨(dú)立的)
使用props傳遞數(shù)據(jù)
在組件中抄淑，使用選項(xiàng) props 來聲明需要從父級(jí)接收的數(shù)據(jù)刻剥， props 的值可以是兩種， 一種是字
符串?dāng)?shù)組腻窒，一種是對(duì)象 昵宇。
props 中聲明的數(shù)據(jù)與組件 data 函數(shù) return 的數(shù)據(jù)主要區(qū)別就是 props 的來自父級(jí)，而 data 中
的是組件自己的數(shù)據(jù)定页，作用域是組件本身趟薄，這兩種數(shù)據(jù)都可以在模板 template及計(jì)算屬性 computed
和方法 methods 中使用。
有時(shí)候典徊，傳遞的數(shù)據(jù)并不是直接寫死的杭煎，而是來自父級(jí)的動(dòng)態(tài)數(shù)據(jù)，這時(shí)可以使用指令 v-bind
來動(dòng)態(tài)綁定 props 的值羡铲，當(dāng)父組件的數(shù)據(jù)變化時(shí)儡毕，也會(huì)傳遞給子組件。
<div id="app">
<input type="text" v-model="parentmessage">
<my-component :message="parentmessage"></my-component>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
parentmessage: ''
},
components: {
'my-component': {
template: '<div>{{ message }}</div>',
props: ['message']
}
}
})
</script>
注意：如果你要直接傳遞數(shù)字雷恃、布爾值费坊、數(shù)組、對(duì)象附井，而且不使用 v-bind，傳遞的僅僅是字符串
單向數(shù)據(jù)流
Vue2.x 通過 props 傳遞數(shù)據(jù)是單向的了把跨。這樣的設(shè)計(jì)目的是盡可能將父子組件解稿沼死，避免子組件無意中修改了父組件的狀態(tài)。
父組件數(shù)據(jù)通過props傳進(jìn)來滨嘱。子組件可以用data和computed維護(hù)一份相聯(lián)系的數(shù)據(jù)而不必修改父數(shù)據(jù)
數(shù)據(jù)驗(yàn)證
props選項(xiàng)除了數(shù)組外，還可以是對(duì)象
props: {
//選項(xiàng)有type（定義多個(gè)用數(shù)組）吟榴、defalut囊扳、required(布爾值)、驗(yàn)證函數(shù)
propA: {
type: [Number, String],
defalut: true,
required: true
},
propB: {
validator: function(value){
return value > 10
}
}
}
組件通信
組件關(guān)系可以分為父子锥咸、兄弟、跨級(jí)組件通信
子組件像父組件傳遞數(shù)據(jù)：
使用自定義事件
子組件用$emit()來觸發(fā)事件熊锭，父組件用$on()來監(jiān)聽子組件的事件使用v-model
實(shí)現(xiàn)這樣一個(gè)具有雙向綁定的 v-model組件要滿足下面兩個(gè)要求:
接收一個(gè) value屬性
在有新的 value 時(shí)觸發(fā) input事件雪侥。
非父子組件通信
在Vue. 2.x中， 推薦使用一個(gè)空的Vue實(shí)例作為中央事件總線(bus)锌妻，也就是一個(gè)中介.(發(fā)布旬牲、訂閱模式)
比如你需要租房子， 你可能會(huì)找房產(chǎn)中介來登記你的需求 原茅， 然后中介把你的信息發(fā)給滿足要求的出租者擂橘，出租者再把報(bào)價(jià)和看房時(shí)間告訴中介，由中介再轉(zhuǎn)達(dá)給你贝室，整個(gè)過程中 仿吞， 買家和賣家 并沒有任何交流，都是通過中間人來傳話的 峡迷。
或者你最近可能要換房了 ， 你會(huì)找房產(chǎn)中介登記你的信息 绘搞， 訂閱與你找房需求相關(guān)的資訊， 一旦有符合你 的房子出現(xiàn)時(shí)夯辖，中介會(huì)通知 你 ，并傳達(dá)你房子 的具體信息 圆米。
這兩個(gè)例子中 啄栓， 你和出租者擔(dān)任的就是兩個(gè)跨級(jí)的組件，而房產(chǎn)中介就是這個(gè)中央事件總線 (bus) 近速。
父鏈
在子組件中堪旧，使用this.$parent可以直接訪問該組件的父實(shí)例或組件，父組件也可以通過this.$children訪問它的所有子組件崎场，而且可以遞歸向上或向下訪問谭跨。
盡管Vue允許這樣操作，但在業(yè)務(wù)中螃宙，子組件應(yīng)該盡可能避免依賴父組件的數(shù)據(jù)。更不該主動(dòng)修改它的數(shù)據(jù)挂捅。這樣父子組件是緊耦合的堂湖。
理想狀況下，只有組件能修改它的狀態(tài)伺糠。父子組件最好還是通過props和$emit$來通信
子組件索引
Vue提供了子組件索引的方法斥季，用特殊的屬性ref來為子組件指定一個(gè)索引名稱
