国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

高級 Vue 組件模式 (2)

Galence / 1371人閱讀

摘要：編寫復(fù)合組件目標我們需要實現(xiàn)的需求是能夠使使用者通過組件動態(tài)地改變包含在它內(nèi)部的內(nèi)容。成果通過復(fù)合組件的方式，我們將組件劃分為了三個更小的職責(zé)更加單一的子組件。

02 編寫復(fù)合組件 目標

我們需要實現(xiàn)的需求是能夠使使用者通過 組件動態(tài)地改變包含在它內(nèi)部的內(nèi)容。

熟悉 vue 的童鞋可能馬上會想到不同的解決方案，比如使用 slot 并配合 v-if，我們這里采用另外一種方法，利用 vue 提供的 provide/inject 屬性按照復(fù)合組件的思想來實現(xiàn)。

這里簡單介紹下 provide/inject 的功能，它允許某個父組件向子組件注入一個依賴項（這里的父子關(guān)系可以跨域多個層級，也就是祖先與后代），如果我們在其他 mvvm 框架對比來看的話，你可以發(fā)現(xiàn)其他框架也具有相同的特性，比如：

angularjs: directive 中的 require 屬性來聲明注入邏輯

Angular: 依賴注入中組件級別的注入器

React: context 上下文對象

想進一步了解的話，可以參考官方文檔

實現(xiàn)

在 vue 中，這里我們會分別實現(xiàn)三個組件，依次為：

toggle-button: 代表開關(guān)，用來渲染父組件的開關(guān)狀態(tài)

toggle-on: 根據(jù)父組件 toggle 的開關(guān)狀態(tài)，渲染當(dāng)狀態(tài)為開時的內(nèi)容

toggle-off: 根據(jù)父組件 toggle 的開關(guān)狀態(tài)，渲染當(dāng)狀態(tài)為關(guān)時的內(nèi)容

在上一篇文章中，我們已經(jīng)實現(xiàn)了 toggle 組件，這里我們要做一些更改。首先，需要使用 provide 屬性增加一個提供依賴的邏輯，如下：

provide() {
    return {
      toggleComp: {
        status: this.status,
        toggle: this.toggle
      }
    }
}

這里的 status 是該組件 data 中的聲明的一個可監(jiān)聽對象，這個對象包含一個 on 屬性來代表組件的開關(guān)狀態(tài)，而 toggle 則是 methods 中的一個組件方法。

關(guān)于為什么這里不直接使用 on 屬性來代表開關(guān)狀態(tài)，而使用一個可監(jiān)聽對象，是因為 provide 和 inject 綁定并不是可響應(yīng)的，同時官方文檔也指出，這是刻意而為，所以為了享受到 vue 響應(yīng)性帶來的便利性，我們這里傳入 status 這個可監(jiān)聽對象。

對于其他三個組件，其內(nèi)部實現(xiàn)邏輯十分簡單，相信讀者通過參考在線代碼實例馬上就能看懂，這里只提一下關(guān)于 inject 聲明注入依賴的邏輯，如下：

inject: { toggleComp: "toggleComp" }

這里的 "toggleComp" 與之前的 provide 對象中聲明的 key 值所對應(yīng)，而 inject 對象的 key 值當(dāng)前組件注入依賴項的變量名稱，之后，子組件即可以通過 this.toggleComp 來訪問父組件的屬性與方法。

成果

通過復(fù)合組件的方式，我們將 toggle 組件劃分為了三個更小的、職責(zé)更加單一的子組件。同時由于 toggle-on 和 toggle-off 都使用 slot 來動態(tài)地注入組件調(diào)用者在其內(nèi)部包含的自定義渲染邏輯，其靈活性得到了進一步的提升，只要這三個組件是作為 toggle 組件的子組件來調(diào)用，一切都將正常運行。

你可以下面的鏈接來看看這個組件的實現(xiàn)代碼以及演示：

sandbox: 在線演示

github: part-2

總結(jié)

通常情況下，在設(shè)計和實現(xiàn)職能分明的組件時，可以使用這種模式，比如 tabs 與 tab 組件，tabs 只負責(zé) tab 的滾動、導(dǎo)航等邏輯，而 tab 本身僅負責(zé)內(nèi)容的渲染，就如同這里的 toggle 和 toggle-button、`toggle-on、toggle-off 一樣。

目錄

github gist

歡迎關(guān)注公眾號 全棧101，只談技術(shù)，不談人生

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98526.html

相關(guān)文章

  • 高級 Vue 組件模式 (1)

    摘要：寫在前頭去年，曾經(jīng)閱讀過一系列關(guān)于高級組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級組件模式的文章，碰巧最近接手了一個公司項目，前端這塊的技術(shù)棧是。同時這個組件還擁有一個屬性，用來初始化的狀態(tài)值。 寫在前頭 去年，曾經(jīng)閱讀過一系列關(guān)于高級 react 組件模式的文章，今年上半年，又抽空陸陸續(xù)續(xù)地翻譯了一系列關(guān)于高級 angular 組件模式的文章，碰巧最近接手了一個公...

    lanffy 評論0 收藏0

  • 高級 Vue 組件模式 (3)

    摘要：在中，我們是否也有一些手段或特性來提高組件的復(fù)用程度和靈活性呢答案當(dāng)然是有的，那就是。成果通過實現(xiàn)，我們成功將注入的邏輯抽離了出來，這樣每次需要共享組件的狀態(tài)和方法時，混入該即可。 03 使用 mixin 來增強 Vue 組件 目標 之前一篇文章中，我們雖然將 toggle 組件劃分為了 toggle-button、toggle-on 和 toggle-off 三個子組件，且一切運行良...

    iKcamp 評論0 收藏0

  • 高級 Vue 組件模式 (5)

    摘要：你可以下面的鏈接來看看這個組件的實現(xiàn)代碼以及演示在線演示總結(jié)當(dāng)期望獲得子元素或者子組件的引用時，切記使用和來解決問題。 05 使用 $refs 訪問子組件引用 目標 在之前的文章中，詳細闡述了子組件獲取父組件所提供屬性及方法的一些解決方案，如果我們想在父組件之中訪問子組件的一些方法和屬性怎么辦呢？設(shè)想以下一個場景： 當(dāng)前的 custom-button 組件中，有一個 input 元素...

    woshicixide 評論0 收藏0

  • 高級 Vue 組件模式 (9)

    摘要：在中，這種類型的組件也可以叫做函數(shù)式組件。這種組件和普通組件相比的優(yōu)勢主要在于，它是無狀態(tài)的，這意味著它的可測試性和可讀性更好，同時一些情況下，渲染開銷也更小。 09 使用 Functional 組件 目標 到此為止，我們的 toggle 組件已經(jīng)足夠強大以及好用了，因此這篇文章不會再為它增加新的特性。如果你是從第一篇文章一直讀到這里的讀者，你一定會發(fā)現(xiàn)，整篇文章中，我?guī)缀鯖]有對 to...

    李義 評論0 收藏0

  • 高級 Vue 組件模式 (6)

    摘要：之后再引入該指令，如下之后就可以在組件的模板中使用該指令了，比如一切都將按預(yù)期中運行，當(dāng)組件的狀態(tài)為開時，組件的根元素會增加一個的內(nèi)容增強屬性。到后來興起了組件化開發(fā)的開發(fā)思想，指令似乎是隨著的沒落而消失了蹤影。 06 通過 directive 增強組件內(nèi)容 目標 之前的五篇文章中，switch 組件一直是被視為內(nèi)部組件存在的，細心的讀者應(yīng)該會發(fā)現(xiàn)，這個組件除了幫我們提供開關(guān)的交互以外...

    makeFoxPlay 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<