成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue 2 | Part 8 組件通信

MartinDai / 2493人閱讀

摘要：實(shí)例和組件之間的通信先來看一下我們最后要完成的效果吧。在組件的內(nèi)部監(jiān)聽到用戶的事件后，執(zhí)行自身的方法，把信號(hào)發(fā)布出去。所以可以直接把實(shí)例作為一個(gè)，在組件之間進(jìn)行通信。比方說，我們希望點(diǎn)擊按鈕以后，另外一個(gè)組件可以接收到這個(gè)信號(hào)。

當(dāng)組件監(jiān)聽到用戶的行為，需要觸發(fā)一些界面交互的時(shí)候，實(shí)例與組件之間、組件相互之間就需要進(jìn)行通信了。Vue里面有兩個(gè)api可以幫助我們輕松地完成這件事，它們是$on和$emit。

實(shí)例和組件(parent child)之間的通信

先來看一下我們最后要完成的效果吧。初始狀態(tài)：

點(diǎn)擊按鈕以后隱藏文字：

初始代碼 

    

        
I am your Big Box

    

    

Vue.component("toggle-btn", {
    template: ""
})

var app = new Vue({
    el: "#app"
})

我們把按鈕做成一個(gè)簡(jiǎn)單的組件，那應(yīng)該怎么獲取按鈕監(jiān)聽到的點(diǎn)擊事件，傳給big box呢？

監(jiān)聽按鈕組件上的自定義事件

用戶點(diǎn)擊的時(shí)候，是在toggle-btn這個(gè)組件上觸發(fā)了事件，所以我們信號(hào)的源頭，肯定是在它身上。Vue允許我們監(jiān)聽組件上的自定義事件，像這樣：

這里有幾點(diǎn)需要注意的：

自定義的事件，需要用中劃線分詞，在HTML和JS都是。用駝峰分詞是完全沒有效果的。

雖然監(jiān)聽的是組件的自定義事件，但后面觸發(fā)的這個(gè)toggleBox方法，是在Vue實(shí)例上的。

這里是監(jiān)聽的是自定義的事件，真正的click事件，是在組件內(nèi)部進(jìn)行監(jiān)聽（下面會(huì)解釋）。

所以上面的這行HTML的意思，其實(shí)是，當(dāng)Vue實(shí)例監(jiān)聽到組件上自定義的toggle-box事件被觸發(fā)，就會(huì)執(zhí)行它的toggleBox方法。

組件發(fā)布信號(hào)

被監(jiān)聽的事件有了，這個(gè)組件到底要怎么把信號(hào)發(fā)布出來，讓Vue實(shí)例監(jiān)聽到呢？我們直接來看下面這段代碼。

在組件的內(nèi)部監(jiān)聽到用戶的click事件后，執(zhí)行自身的方法，把信號(hào)發(fā)布出去。

Vue.component("toggle-btn", {
    template: "
        
    ",
    methods: {
        emmitToggle: function() {
            // 用戶點(diǎn)擊之后，發(fā)布信號(hào)
            this.$emit("toggle-box")
        }
    }
})
完善事件觸發(fā)的方法

接收到信號(hào)以后，我們希望可以toggle文字的顯示，最直接的當(dāng)然是在實(shí)例上的data里面初始化一個(gè)showBox為true，執(zhí)行toggleBox方法的時(shí)候?qū)λM(jìn)行操作。同時(shí)，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)聽用戶行為（我們的例子里是點(diǎn)擊）

用戶點(diǎn)擊，觸發(fā)組件自身的方法并發(fā)布信號(hào)（$emit）：我這邊的toggle-box事件被觸發(fā)了

HTML中的v-on指令捕捉到這個(gè)信號(hào)，執(zhí)行Vue實(shí)例下的toggleBox方法

showBox的值被修改，v-show對(duì)文字進(jìn)行隱藏或顯示

組件之間的通信

其實(shí)$emit方法是掛在Vue實(shí)例下，每一個(gè)Vue實(shí)例都會(huì)有$emit和$on方法。所以可以直接把vue實(shí)例作為一個(gè)event bus，在組件之間進(jìn)行通信。

這里簡(jiǎn)單地舉個(gè)例子。比方說，我們希望點(diǎn)擊toggle按鈕以后，另外一個(gè)組件可以接收到這個(gè)信號(hào)。

toggle-btn基本不變，只是改為使用event bus的$emit方法。listener中也同樣使用event bus的$on對(duì)信號(hào)進(jìn)行監(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信號(hào)！")
        })
    }
})

var app = new Vue({
    el: "#app"
})

寫在最后

源碼地址：https://github.com/levblanc/v...

視頻攻略：小的不才，為求一贊，自制 本期視頻攻略 在此。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81343.html

相關(guān)文章

  • Vue 2 | 基礎(chǔ)API系列文章合集

    摘要：在大家的鞭策和鼓勵(lì)下，這個(gè)基礎(chǔ)的系列終于完成了。關(guān)于更新的頻率，因?yàn)槭俏易约阂粋€(gè)人在做，文案視頻都準(zhǔn)備好了才發(fā)的話，最快也只能一周一更。最后這幾期可以密集地更新，完全是因?yàn)楣痉偶倭恕２贿^月份的更新速度真的不能保證，抱歉。 在大家的鞭策和鼓勵(lì)下，這個(gè)基礎(chǔ)API的系列終于完成了。所幸是沒有真的更到一百期才完結(jié)（笑）。最初是因?yàn)橛X得錄視頻好玩，才挖的這個(gè)坑。也想過中途放棄，關(guān)掉專欄，但由于...

    instein 評(píng)論0 收藏0

  • Vue 2 | Part 7 組件

    摘要：因?yàn)檫@里會(huì)舉一連串的例子，就直接用來作為組件名稱了。這是一個(gè)組件名稱定義的時(shí)候有一點(diǎn)需要注意的，就是要使用中劃線分詞。在組件的方法里面返回?cái)?shù)據(jù)就可以了。在的組件中間定義的內(nèi)容，就會(huì)被插入到的位置中去。敬請(qǐng)期待下一期，組件通信。 界面寫多了，大家應(yīng)該都會(huì)想到一個(gè)問題：JS的模塊寫好以后可以在多個(gè)地方重復(fù)使用，HTML有沒有辦法做到呢？Vue給了我們這個(gè)能力，使用組件，就可以輕松做到。 最...

    xcold 評(píng)論0 收藏0

  • Vue.js應(yīng)用性能優(yōu)化：第一部分---介紹性能優(yōu)化和懶加載

    摘要：我的目標(biāo)是使本系列成為關(guān)于應(yīng)用程序性能的完整指南。代碼分割就是將應(yīng)用程序分割成這些延遲加載的塊?？偨Y(jié)延遲加載是提高應(yīng)用程序性能并減少其大小的最佳方法之一。在本系列的下一部分中，我將向您展示如何使用和路由來分割應(yīng)用程序代碼。 當(dāng)移動(dòng)優(yōu)先（mobile-first）的方式逐漸成為一種標(biāo)準(zhǔn)，而不確定的網(wǎng)絡(luò)環(huán)境因素應(yīng)該始終是我們考慮的一點(diǎn)，因此保持讓應(yīng)用程序快速加載變得越來越困難。在本系列文章...

    ZweiZhao 評(píng)論0 收藏0

  • Vue.js應(yīng)用性能優(yōu)化：第二部分---路由懶加載和 Vendor bundle 反模式

    摘要：現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)用于分割應(yīng)用程序最實(shí)用的模式。本系列文章基于對(duì)性能優(yōu)化過程的學(xué)習(xí)。路徑時(shí)才被下載。為了便于理解，文件名稱并不是由生成的真實(shí)名稱。接下來，我們將學(xué)習(xí)其他部分和單獨(dú)的組件也能夠從主文件分割出來并延遲加載。 在前一篇文章中，我們學(xué)習(xí)了什么是代碼分割，它是如何與 Webpack 一起工作的，以及如何在Vue應(yīng)用程序中使用延遲加載?，F(xiàn)在，我們將更深入地研究，并學(xué)習(xí)...

    0x584a 評(píng)論0 收藏0

  • Vue.js應(yīng)用性能優(yōu)化：第三部分-延遲加載Vuex模塊

    摘要：靜態(tài)模塊不能被取消注冊(cè)也不能延遲注冊(cè)，并且在初始化后不能更改靜態(tài)模塊的結(jié)構(gòu)不是狀態(tài)。為此，我們將在路由對(duì)應(yīng)的組件中加載模塊，而不是在中導(dǎo)入并注冊(cè)它。能代碼分割模塊是一個(gè)強(qiáng)大的工具。 在前一部分，我們學(xué)習(xí)了足夠強(qiáng)大的模式，可以顯著提高應(yīng)用程序的性能 - 按每個(gè)路由分割代碼。雖然按路由分割代碼非常有用，但是在用戶訪問我們的站點(diǎn)后，仍然有很多代碼是不需要的。在本系列的這一部分中，我們將重點(diǎn)關(guān)...

    charles_paul 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<