1、本章知識(shí)點(diǎn)
- 事件命名才用 "-" 分割。(不采用駝峰，因?yàn)閔tml是大小寫(xiě)不敏感)
- .sync 修飾符的使用
2卫漫、$emit 作用與語(yǔ)法
通常用于子組件調(diào)用父組件方法,實(shí)現(xiàn)子組件主動(dòng)與父組件進(jìn)行通訊。
<!---html-->
<div id="app">
<my-component @my-fun='parentFun'></my-component>
</div>
//這里注冊(cè)了一個(gè)全局組件
Vue.component('my-component',{
template:`<button @click='clickMe'>調(diào)用父類(lèi)的方法</button></div>`,
methods:{
clickMe(){
this.$emit('my-fun',123)
}
}
})
var vm = new Vue({
el:'#app',
methods:{
parentFun(value){
alert(value);
}
}
})
這時(shí)點(diǎn)擊子組件的按鈕時(shí)肾砂，彈出了123列赎。這里的 @my-fun='parentFunc' 就是創(chuàng)建了一個(gè)調(diào)用父組件parentFun方法的事件my-fun。然后在子組件通過(guò)this.$emit('my-fun',123)就可以觸發(fā)事件镐确。
3包吝、.sync修飾符的使用
作用：用于實(shí)現(xiàn)父子組件數(shù)據(jù)的雙向綁定 (語(yǔ)法糖)
.sync實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
原理：通過(guò).sync綁定的父子組件的值饼煞。實(shí)際上上Vue自動(dòng)為子組件創(chuàng)建一個(gè)事件，用來(lái)改變父組件值诗越，而事件名默認(rèn)為: update: prop值砖瞧。以下面案例進(jìn)行說(shuō)明:
? ? ? ? ? 通過(guò)在子組件添加: :child-value.sync ='value'。 Vue看到 .sync關(guān)鍵字會(huì)自動(dòng)為子組件創(chuàng)建一個(gè)叫做 update:childValue或者update:child-value的事件掺喻。(這兩種事件名都可以成功調(diào)用) 這個(gè)事件可以接受參數(shù)芭届，并自動(dòng)將參數(shù)賦給父組件的 value储矩「邪遥可以理解為事件是引用了這樣的方法
" (value) => this.value = value " 可以看到在后面子組件的input的觸發(fā)方法我成功調(diào)用事件,將子組件的 <input> 輸入傳遞給父組件。
<!-- html代碼 -->
<div id="app">
修改父組件的值:<input type='text' v-model='value'></input><br>
父組件的值:{{value}}
<my-component :child-value.sync='value' @my-fun='parentFun'></my-component>
</div>
Vue.component('myComponent',{
props:['childValue'],
template:`<div>修改子組件的值:<input type='text' ref="inputID" @input='inputFun($event)'></input><br>
子組件的值：{{ myData }}<br></div>`,
data(){
return{
myData: this.childValue
}
},
methods:{
inputFun(e){
const value = e.target.value;
this.myData = value;
this.$emit('update:childValue',value)
}
},
watch:{
'childValue':function(val){
this.myData = val;
this.$refs.inputID.value = this.myData;
}
}
})
var vm = new Vue({
el:'#app',
data:{
value:'',
},
})
最終效果圖： 改變父組件的值 或是 改變子組件的值持隧，父子組件都會(huì)跟著變化即硼。
3.補(bǔ)充說(shuō)明：關(guān)于為什么要使用watch監(jiān)聽(tīng)
因?yàn)檫@里涉及到修改子組件的值，所以沒(méi)有讓<input>直接綁定props值屡拨。Vue并不推薦在子組件中修改props的值 ( 具體可以參考: Vue中props的用發(fā) )只酥。 所以選擇將props當(dāng)作data值的初始值。又因?yàn)閜rops只被用作為初始值呀狼，所以當(dāng)父組件的值發(fā)生改變裂允，引發(fā)子組件的props值發(fā)生改變，并不是傳遞給子組件的data屬性哥艇。所以這里使用watch來(lái)監(jiān)聽(tīng)props的值绝编，實(shí)時(shí)的改變data的值。
