題目描述

《Vue.js實(shí)戰(zhàn)》里面的關(guān)于組件通信的章節(jié)，有一篇關(guān)于介紹自定義事件的。子組件的自定義事件通過(guò)$emit通知父組件，而父組件可通過(guò)v-on監(jiān)聽(tīng)子組件的自定義事件。雖然知道，是這樣的一個(gè)機(jī)制，但是看到下面的代碼之后就還是沒(méi)理解實(shí)質(zhì)。希望大神能夠解釋一下，最好形象一些。

題目來(lái)源及自己的思路

《Vue.js實(shí)戰(zhàn)》第7章 7.3節(jié)組件通信 7.3.1 自定義事件

<my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>

看到這里我是理解成這樣：自定義標(biāo)簽my-component定義了兩個(gè)自定義事件increase和reduce，這兩個(gè)事件的事件處理程序都是handleGetTotal，所以我就去了子組件內(nèi)查這個(gè)處理程序，但是發(fā)現(xiàn)子組件的methods里面沒(méi)有，只有handleIncrease和handleReduce，這里感覺(jué)困惑。然后想這個(gè)是父組件通過(guò)v-on監(jiān)聽(tīng)這兩個(gè)事件，所以事件處理程序handleGetTotal應(yīng)該是父組件提供？然后看到確實(shí)在父組件的methods里面找到了。所以，雖然increase和reduce是子組件自已定義的事件，但是對(duì)應(yīng)的處理程序（這些事件都干些什么）一定是父組件提供？這個(gè)理解對(duì)么？

然后再看詳細(xì)的函數(shù)內(nèi)容:

handleGetTotal: function(total) {
                this.total = total;
                console.log(this);  //Vue
            }

function(total)這里的total看起來(lái)似乎是從子組件那邊傳過(guò)來(lái)的，似乎是通過(guò)

this.$emit('increase', this.counter);
this.$emit('reduce', this.counter);

但是，到底是不是這樣傳的？如果是這樣傳的 this.counter 作為子組件的數(shù)據(jù)怎么和function(total)這里的total對(duì)應(yīng)起來(lái)的？我測(cè)試function(total)這里的參數(shù)是任意字符串都可以，所以對(duì)應(yīng)起來(lái)：

@increase="handleGetTotal"
this.$emit('increase', this.counter);


@reduce="handleGetTotal"
this.$emit('reduce', this.counter);

this.counter作為子組件處理之后的數(shù)據(jù)又回傳給父組件提供的函數(shù)handleGetTotal。是不是這樣的呢？
如果是這樣的話，前面的疑問(wèn)似乎就是解了？

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）

  <div id="app" v-cloak>
        <p>總數(shù)：{{total}}</p>
        <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
  </div>
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
    Vue.component('my-component', {
        template: `\
        <div>\
            <button @click="handleIncrease">+1</button>\
            <button @click="handleReduce">-1</button>\
         </div>`,
        data: function() {
            return {
                counter: 0
            }
        },
        methods: {
            handleIncrease: function() {
                this.counter++;
                this.$emit('increase', this.counter);
                console.log(this);  //VueComponent
            },
            handleReduce: function() {
                this.counter--;
                this.$emit('reduce', this.counter);
                console.log(this);   //VueComponent
            },
        }
    })
    var app = new Vue({
        el: '#app',
        data: {
            total: 0
        },
        methods: {
            handleGetTotal: function(total) {
                this.total = total;
                console.log(this);  //Vue
            }
        }
    })
    </script>