組件
#全局注冊(cè)
可以通過(guò)以下方式創(chuàng)建一個(gè) Vue 實(shí)例
new Vue({
? ? ?el:"#some-element",
? ? ?//選項(xiàng)
})
要注冊(cè)一個(gè)全局組件可以使用Vue.component(tagname, options)芒填， 組件在注冊(cè)之后，便可以作為自定義元素??在一個(gè)實(shí)例的模板中使用朱庆。注意確保在初始化根實(shí)例之前注冊(cè)組件
Vue.component("my-component", {
? ? ?//選項(xiàng)
})
#局部注冊(cè)
不必把每個(gè)組件都注冊(cè)到全局闷祥。你可以通過(guò)某個(gè) Vue 實(shí)例/組件的實(shí)例選項(xiàng)?components?注冊(cè)僅在其作用域中可用的組件：
var Child = {
? ? ?template:"<div>A custom component</div>"
}
new Vue({
? ? ?component:{
? ? ? ? ? ? //<my-component> 將只在父組件模板中可用
? ? ? ? ? ?"my-component":Child
? ? ?}
})
#data 必須是函數(shù)
構(gòu)造 Vue 實(shí)例時(shí)傳入的各種選項(xiàng)大多數(shù)都可以在組件里使用。只有一個(gè)例外：data?必須是函數(shù)箱硕。
<div id="example-2">
? ? ?<my-component></my-component>
</div>
Vue.component("my-component",{
? ? ?template:"<button v-on:click='counter += 1'>{{counter}}</button>",
? ? data:function(){
? ? ? ? ?return {counter:0}
? ? }
})
new Vue({
? ? ?el:"#example-2"
})
#組件組合
組件設(shè)計(jì)初衷就是要配合使用的悟衩，最常見(jiàn)的就是形成父子組件的關(guān)系：組件 A 在它的模板中使用了組件 B。它們之間必然需要相互通信：父組件可能要給子組件下發(fā)數(shù)據(jù)座泳，子組件則可能要將它內(nèi)部發(fā)生的事情告知父組件。然而舰罚，通過(guò)一個(gè)良好定義的接口來(lái)盡可能將父子組件解耦也是很重要的薛耻。這保證了每個(gè)組件的代碼可以在相對(duì)隔離的環(huán)境中書寫和理解赏陵，從而提高了其可維護(hù)性和復(fù)用性。
在 Vue 中蝙搔，父子組件的關(guān)系可以總結(jié)為?prop 向下傳遞，事件向上傳遞证鸥。父組件通過(guò)?prop?給子組件下發(fā)數(shù)據(jù)勤晚，子組件通過(guò)事件給父組件發(fā)送消息。
#使用Prop傳遞數(shù)據(jù)
組件實(shí)例的作用域是孤立的.這意味著不能在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù).父組件的數(shù)據(jù)需要通過(guò)prop才能下發(fā)到子組件中.
子組件要顯示地用props選項(xiàng)聲明它預(yù)期的數(shù)據(jù)
Vue.co,ponent('child', {
? ? ?props:['message'],
? ? ?template:'<span>{{message}}</span>'
})
然后我們可以這樣向它傳入一個(gè)普通的字符串
<child message="hello"></child>
#camelCase vs kebab-case
HTML 特性是不區(qū)分大小寫的赐写。所以，當(dāng)使用的不是字符串模板時(shí)揉忘，camelCase (駝峰式命名) 的 prop 需要轉(zhuǎn)換為相對(duì)應(yīng)的 kebab-case (短橫線分隔式命名)
Vue.component('child',{
? ? ?props:["myMessage"],
? ? ?template:"<span>{{myMessage}}</span>"
})
<child my-message="hello"></child>
如果使用字符串模板，則沒(méi)有這些限制泣矛。
#動(dòng)態(tài)Prop
與綁定到HTML特性相類似,可以用v-bind來(lái)動(dòng)態(tài)的將prop綁定到父組件的數(shù)據(jù).每當(dāng)父組件的數(shù)據(jù)變化時(shí),該變化也會(huì)傳導(dǎo)給子組件
<div>
<input
