1. 自定義事件

除了可以處理原生的DOM事件, v-on指令也可以處理組件內部觸發(fā)的自定義的事件,調用this.$emit()函數就可以觸發(fā)一個自定義事件

$emit() 觸發(fā)事件函數接受一個自定義事件的事件名以及其他任何給事件函數傳遞的參數. 然后就可以在組件上使用v-on來綁定這個自定義事件

{methods: {handleClick(){this.clicks++this.$emit("count",this.clicks )}}
}

所以我們就可以利用自定事件來處理子組件觸發(fā)父組件數據的更改和向父組件傳值

2. 子組件觸發(fā)父組件數據的改變

通過父組件向子組件傳值的學習,我們已經知道了Vue是單向下行數據流, 子組件更改props中的數據不會觸發(fā)父組件數據的改變, 但是由于響應式原理,父組件數據的改變會導致子組件props中值的改變

那么我們怎樣才能在子組件中改變顯示的結果呢.

思路:

1. 子組件中沒法更改父組件中的數據,那么我們就讓父組件自己的函數改自己的數據
2. 如何在子組件中觸發(fā)父組件中的函數呢, 就可以通過自定義事件
3. 子組件在函數中觸發(fā)自定義事件, 將父組件中更改數據的函數綁定為自定義事件的函數
4. 然后父組件中的數據一變,因為響應式,所以子組件中的數據會自動改變

示例代碼如下:

<div id="app"><!-- 使用組件 --><!-- 3.在子組件中綁定自定義事件, 將父組件的方法綁定為自定義事件的處理函數--><my-component :clicks="clicks" @count="handleParentClick"></my-component></div><!-- 組件模板 -->
<template id="MyComponent"><div>被點擊了{{clicks}}次<!-- 1. 子組件通過原生click事件觸發(fā)子組件自己的函數 --><button @click="handleClick">點擊</button></div>
</template><script>//  組件選項對象let MyComponent = {props:["clicks"],template: `#MyComponent`,methods:{handleClick(){// 2.子組件函數中觸發(fā)自定義事件this.$emit("count")}}}//  實例中注冊組件const vm = new Vue({el:"#app",data: {clicks:0},components: {"MyComponent": MyComponent},methods:{handleParentClick(){// 4. 在父組件函數中修改父組件中的數據this.clicks++}}})
</script>

示例結果

最后父組件數據一變,子組件顯示結果自然變化

我們也知道$emit方法在觸發(fā)自定義事件的時候,還可以給自定義事件傳參, 這樣就可以實現子組件向父組件傳參

3. 子組件向父組件傳參

上一小節(jié),我們是在子組件中通過自定義事件觸發(fā)父組件中的函數, 在父組件中修改數據,

同樣我們也可以在子組件中修改數據,然后將修改后的數據通過自定義事件傳參的方式,傳遞給父組件函數,在父組件函數中直接用子組件傳過來修改后的數據直接替換父組件中的數據

示例代碼如下:

<div id="app"><!-- 使用組件 --><!-- 3.在子組件中綁定自定義事件, 將父組件的方法綁定為自定義事件的處理函數--><my-component :clicks="clicks" @count="handleParentClick"></my-component>
</div><!-- 組件模板 -->
<template id="MyComponent"><div>被點擊了{{clicks}}次<!-- 1. 子組件通過原生click事件觸發(fā)子組件自己的函數 --><button @click="handleClick">點擊</button></div>
</template><script>//  組件選項對象let MyComponent = {props:["clicks"],template: `#MyComponent`,data(){return {count: this.clicks}},methods:{handleClick(){// 2.子子組件函數中觸發(fā)自定義事件// 2.1 在觸發(fā)自定義事件的時候向自定事件傳參this.count+=2this.$emit("count",this.count)}}}//  實例中注冊組件const vm = new Vue({el:"#app",data: {clicks:0},components: {"MyComponent": MyComponent},methods:{handleParentClick(count){// 4. 在父組件函數中修改父組件中的數據// 4.1 接受自定義事件觸發(fā)時傳遞的參數console.log(count)this.clicks = count}}})</script>