父組件既可以綁定自定義事件也可以綁定原生事件,只需要在事件名後加.native修飾符即可,例如
HTML部分:
<!-- 父組件上綁定原生事件需要在事件名後加.native修飾符 -->
<my-component @click.native="alertMsg"></my-component>
JS部分:
var myApp = new Vue({
el:"#container",
data:{
sum:1,
initNum:3
},
methods:{
// 這裏的t就是從this.$emit("getall",this.total)上面傳下來的this.total
getSum:function(t){
this.sum+=t
},
alertMsg:function(){
alert("我是組件上原生事件觸發的")
}
}
})
當點擊組件的時候會彈出“我是組件上原生事件觸發的”的提示框;
V-model在父子組件中的應用
HTML部分:
<my-component1 v-model="initNum"></my-component1>
<p>當前initNum的值爲:{{initNum}}</p>
JS部分:
Vue.component("my-component1",{
template:"<button @click='getAll' type='button'>add</button>",
data:function(){
return {
totals:2
}
},
methods:{
getAll:function(){
this.totals=this.totals+1;
this.$emit("input",this.totals*6)
}
}
})
var myApp = new Vue({
el:"#container",
data:{
sum:1,
initNum:3
},
methods:{
// 這裏的t就是從this.$emit("getall",this.total)上面傳下來的this.total
getSum:function(t){
this.sum+=t
},
alertMsg:function(){
alert("我是組件上原生事件觸發的")
}
}
})
以上,當點擊子組件的時候會直接觸發父組件上的input事件(雖然沒有直接寫,而是用v-model代替的,但是不要忘了,v-model的效果可以通過input事件模擬實現),把this.totals*6傳遞給了initNum(在這裏,v-model綁定的值永遠等於傳遞過來的參數的值),從而改變了initNum的值。
其實從某種程度上說,v-model就是組件自定義事件中的一個特殊情況,只不過在這裏的自定義事件變成了input而已,能做的事情還比較少吧(從目前來看,個人見解);
實現一個具有雙向綁定的v-model組件要滿足兩個要求:
1.接收一個value屬性(父親中的屬性傳遞給子組件(v-bind:value),父組件v-model綁定一個值),
2.在有新的value的時候觸發input事件,這裏包含兩層意思,其一給子組件綁定input事件(你懂的),當該事件觸發的時候,把子組件中的input框的值傳遞給父組件($emit("input",event.target.value)),此時父組件中v-model綁定的值會發生改變(子組件影響父組件中的值),因爲v-model是雙向綁定的,所以Vue實例中的對應數據也會發生變化,然後你懂的.....。
通過父組件影響子組件的值:這就需要通過事件來完成(畢竟父組件不是一個表單元素,不能直接v-model),綁定的數據的變化,因爲父子組件的數據通信是單向的(props),把父組件通過props傳遞過來的屬性給綁定到子組件的value屬性,肯定也會發生變化。因此就是雙向的。