【Vue.js 入門到實戰(zhàn)教程】08-Vue 組件通信 | 父子組件之間的數(shù)據(jù)傳遞和事件監(jiān)聽

組件內(nèi)事件監(jiān)聽

在單個 Vue 組件內(nèi)部實現(xiàn)事件監(jiān)聽和處理和在全局 Vue 對象實例中的操作并沒有什么不同：

我們在瀏覽器中預覽該文檔，點擊添加按鈕，就可以看到彈出的消息框：

父子組件間事件監(jiān)聽和數(shù)據(jù)傳遞

如果是更復雜的嵌套組件的話，有的時候我們可能想要子組件的事件被父組件監(jiān)聽并處理，比如前面編寫的 Web 開發(fā)框架列表示例：

可以將該視圖中的列表渲染和添加功能分離，將添加功能通過子組件完成（后續(xù)還可以實現(xiàn)該列表的刪除功能子組件），這樣，每次添加新的框架后，就會觸發(fā)父組件的監(jiān)聽函數(shù)執(zhí)行添加功能。

要實現(xiàn)這個子組件事件被父組件監(jiān)聽的功能，需要用到 Vue.js 框架的自定義事件功能：我們可以在父組件中監(jiān)聽一個自定義的事件并編寫對應的事件監(jiān)聽函數(shù)，再在子組件中監(jiān)聽某個系統(tǒng)事件，最后通過 Vue 內(nèi)置的組件通知機制將子組件的事件綁定到父組件事件，這樣子組件上的事件就可以被父組件監(jiān)聽和處理了。

看文字可能有點云里霧里，我們下面編寫一段示例代碼來演示，還是以 Web 開發(fā)框架列表為例，這一次，我們將其重構(gòu)為通過組件嵌套的方式來實現(xiàn)，在?vue_learning/component?目錄下新建一個?event.html?文件，編寫對應的實現(xiàn)代碼如下：

            
    
Web開發(fā)框架：    

可以看到，我們通過自定義的?web-framework-list?組件實現(xiàn) Web 框架列表的渲染，并且在這個組件內(nèi)又通過?add-web-framework?子組件實現(xiàn)新增框架功能，這里我們在父組件中注冊子組件時，自定義了一個?framework-added?事件：

用來監(jiān)聽從?add-web-framework?子組件中的按鈕點擊事件：

新增框架

在子組件中，觸發(fā)按鈕?click?事件時，會通過如下代碼將該事件轉(zhuǎn)發(fā)給父組件作用域中定義的?framework-added?事件監(jiān)聽函數(shù)處理：

addNewFramework() {    this.$emit('framework-added', this.newFramework, this.newLanguage);}

可以看到，子組件可以通過?$emit?函數(shù)向父組件發(fā)送事件消息，并且支持傳遞參數(shù)，父組件中自定義的?framework-added?事件對應的處理函數(shù)是?addFramework：

addFramework(framework, language) {    this.frameworks.push(        {'name': framework, 'language': language}    );}

這樣，子組件中的按鈕點擊事件最終會上報到這個?addFramework?函數(shù)進行處理，將新增的框架添加到框架列表顯示出來。

子組件可以通過?$emit?函數(shù)傳遞事件和數(shù)據(jù)到父組件，父組件則可以通過 props 機制將數(shù)據(jù)傳遞給子組件，在這里示例中，我們也看到對應的應用代碼，在父組件中注冊子組件時，通過屬性綁定將?frameworks?和?languages?數(shù)據(jù)傳遞給了子組件：

在子組件中，則通過?props?聲明了從父組件接收哪些父組件傳遞的屬性數(shù)據(jù)：

props: ['frameworks', 'languages'],

這樣一來，我們就可以直接在子組件中使用這兩個屬性了：

template: '
' +    '框架： ' +    '語言:  ' +    '新增框架' +    '
',methods: {    addNewFramework() {        let exists = this.frameworks.find(framework => framework.name == this.newFramework);        if (exists) {            alert('該框架已存在！');            return;        }        this.$emit('framework-added', this.newFramework, this.newLanguage);    }}

這樣一來，我們就實現(xiàn)在父子組件之間的雙向通信了，是不是非常簡單方便？

最后，需要注意的是，每個 Vue 組件都應該有且只有一個根元素，所以我們在重構(gòu)的時候無論是?web-framework-list?還是?add-web-framework?組件都在最外層包裹了?