資訊專欄INFORMATION COLUMN
摘要：實例和組件之間的通信先來看一下我們最后要完成的效果吧。在組件的內(nèi)部監(jiān)聽到用戶的事件后，執(zhí)行自身的方法，把信號發(fā)布出去。所以可以直接把實例作為一個，在組件之間進行通信。比方說，我們希望點擊按鈕以后，另外一個組件可以接收到這個信號。
當(dāng)組件監(jiān)聽到用戶的行為，需要觸發(fā)一些界面交互的時候，實例與組件之間、組件相互之間就需要進行通信了。Vue里面有兩個api可以幫助我們輕松地完成這件事，它們是$on和$emit。
實例和組件(parent child)之間的通信先來看一下我們最后要完成的效果吧。初始狀態(tài)：
點擊按鈕以后隱藏文字：
I am your Big Box
Vue.component("toggle-btn", {
template: ""
})
var app = new Vue({
el: "#app"
})
我們把按鈕做成一個簡單的組件，那應(yīng)該怎么獲取按鈕監(jiān)聽到的點擊事件，傳給big box呢？
監(jiān)聽按鈕組件上的自定義事件用戶點擊的時候，是在toggle-btn這個組件上觸發(fā)了事件，所以我們信號的源頭，肯定是在它身上。Vue允許我們監(jiān)聽組件上的自定義事件，像這樣：
這里有幾點需要注意的：
自定義的事件，需要用中劃線分詞，在HTML和JS都是。用駝峰分詞是完全沒有效果的。
雖然監(jiān)聽的是組件的自定義事件，但后面觸發(fā)的這個toggleBox方法，是在Vue實例上的。
這里是監(jiān)聽的是自定義的事件，真正的click事件，是在組件內(nèi)部進行監(jiān)聽（下面會解釋）。
所以上面的這行HTML的意思，其實是，當(dāng)Vue實例監(jiān)聽到組件上自定義的toggle-box事件被觸發(fā)，就會執(zhí)行它的toggleBox方法。
組件發(fā)布信號被監(jiān)聽的事件有了，這個組件到底要怎么把信號發(fā)布出來，讓Vue實例監(jiān)聽到呢？我們直接來看下面這段代碼。
在組件的內(nèi)部監(jiān)聽到用戶的click事件后，執(zhí)行自身的方法，把信號發(fā)布出去。
Vue.component("toggle-btn", {
template: "
",
methods: {
emmitToggle: function() {
// 用戶點擊之后，發(fā)布信號
this.$emit("toggle-box")
}
}
})
完善事件觸發(fā)的方法
接收到信號以后，我們希望可以toggle文字的顯示，最直接的當(dāng)然是在實例上的data里面初始化一個showBox為true，執(zhí)行toggleBox方法的時候?qū)λM行操作。同時，big box里面的文字通過v-show指令來控制是否顯示。
I am your Big Box
var app = new Vue({
el: "#app",
data: {
showBox: true
},
methods: {
toggleBox: function() {
this.showBox = !this.showBox
}
}
})
完整的通信流程
組件監(jiān)聽用戶行為（我們的例子里是點擊）
用戶點擊，觸發(fā)組件自身的方法并發(fā)布信號（$emit）：我這邊的toggle-box事件被觸發(fā)了
HTML中的v-on指令捕捉到這個信號，執(zhí)行Vue實例下的toggleBox方法
showBox的值被修改，v-show對文字進行隱藏或顯示
組件之間的通信其實$emit方法是掛在Vue實例下，每一個Vue實例都會有$emit和$on方法。所以可以直接把vue實例作為一個event bus，在組件之間進行通信。
這里簡單地舉個例子。比方說，我們希望點擊toggle按鈕以后，另外一個組件可以接收到這個信號。
toggle-btn基本不變，只是改為使用event bus的$emit方法。listener中也同樣使用event bus的$on對信號進行監(jiān)聽。
var bus = new Vue()
Vue.component("toggle-btn", {
template: "
",
methods: {
emmitToggle: function() {
// 注意這里使用的是bus，不是this
bus.$emit("toggle-box")
}
}
})
Vue.component("listener", {
template: "sibling component
",
mounted: function () {
bus.$on("toggle-box", function () {
alert("已經(jīng)接收到toggle-box信號！")
})
}
})
var app = new Vue({
el: "#app"
})
寫在最后
源碼地址：https://github.com/levblanc/v...
視頻攻略：小的不才，為求一贊，自制 本期視頻攻略 在此。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81343.html
摘要：在大家的鞭策和鼓勵下，這個基礎(chǔ)的系列終于完成了。關(guān)于更新的頻率，因為是我自己一個人在做，文案視頻都準備好了才發(fā)的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因為公司放假了。不過月份的更新速度真的不能保證，抱歉。 在大家的鞭策和鼓勵下，這個基礎(chǔ)API的系列終于完成了。所幸是沒有真的更到一百期才完結(jié)（笑）。最初是因為覺得錄視頻好玩，才挖的這個坑。也想過中途放棄，關(guān)掉專欄，但由于...
摘要：因為這里會舉一連串的例子，就直接用來作為組件名稱了。這是一個組件名稱定義的時候有一點需要注意的，就是要使用中劃線分詞。在組件的方法里面返回數(shù)據(jù)就可以了。在的組件中間定義的內(nèi)容，就會被插入到的位置中去。敬請期待下一期，組件通信。 界面寫多了，大家應(yīng)該都會想到一個問題：JS的模塊寫好以后可以在多個地方重復(fù)使用，HTML有沒有辦法做到呢？Vue給了我們這個能力，使用組件，就可以輕松做到。 最...
摘要：我的目標是使本系列成為關(guān)于應(yīng)用程序性能的完整指南。代碼分割就是將應(yīng)用程序分割成這些延遲加載的塊。總結(jié)延遲加載是提高應(yīng)用程序性能并減少其大小的最佳方法之一。在本系列的下一部分中，我將向您展示如何使用和路由來分割應(yīng)用程序代碼。 當(dāng)移動優(yōu)先（mobile-first）的方式逐漸成為一種標準，而不確定的網(wǎng)絡(luò)環(huán)境因素應(yīng)該始終是我們考慮的一點，因此保持讓應(yīng)用程序快速加載變得越來越困難。在本系列文章...
摘要：現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)用于分割應(yīng)用程序最實用的模式。本系列文章基于對性能優(yōu)化過程的學(xué)習(xí)。路徑時才被下載。為了便于理解，文件名稱并不是由生成的真實名稱。接下來，我們將學(xué)習(xí)其他部分和單獨的組件也能夠從主文件分割出來并延遲加載。 在前一篇文章中，我們學(xué)習(xí)了什么是代碼分割，它是如何與 Webpack 一起工作的，以及如何在Vue應(yīng)用程序中使用延遲加載。現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)...
摘要：靜態(tài)模塊不能被取消注冊也不能延遲注冊，并且在初始化后不能更改靜態(tài)模塊的結(jié)構(gòu)不是狀態(tài)。為此，我們將在路由對應(yīng)的組件中加載模塊，而不是在中導(dǎo)入并注冊它。能代碼分割模塊是一個強大的工具。 在前一部分，我們學(xué)習(xí)了足夠強大的模式，可以顯著提高應(yīng)用程序的性能 - 按每個路由分割代碼。雖然按路由分割代碼非常有用，但是在用戶訪問我們的站點后，仍然有很多代碼是不需要的。在本系列的這一部分中，我們將重點關(guān)...
閱讀 2570·2021-09-06 15:02
閱讀 3200·2021-09-02 10:18
閱讀 2821·2019-08-30 15:44
閱讀 685·2019-08-30 15:43
閱讀 1948·2019-08-30 14:08
閱讀 2758·2019-08-30 13:16
閱讀 1397·2019-08-26 13:52
閱讀 931·2019-08-26 12:21
