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

資訊專欄INFORMATION COLUMN

Vue.js 組件庫事件系統(tǒng)設(shè)計

yzd / 2531人閱讀

摘要：我們拿為例是指令的簡寫，用來綁定事件監(jiān)聽器我們使用組件的時候，會注冊了一個自定義的事件在組件內(nèi)部觸發(fā)的方式也很簡單調(diào)用了來觸發(fā)當(dāng)前實例上的事件，事件名為那思路來了，如果外層嵌套在了某一個組件里面，事件之間的互相調(diào)用也是類似的，只

我們拿 input-number 為例：

@ 是 v-on 指令的簡寫，用來綁定事件監(jiān)聽器：

我們使用組件的時候，會注冊了一個自定義的事件：

methods: {
    change (v) {
        console.log(v)
    }
}

在組件內(nèi)部觸發(fā)的方式也很簡單：

調(diào)用了 $emit 來觸發(fā)當(dāng)前實例上的事件，事件名為 on-change

this.$emit("on-change", val);

那思路來了，如果 InputNumber 外層嵌套在了某一個 FormItem 組件里面，事件之間的互相調(diào)用也是類似的，只是多了個假設(shè)：

嵌套關(guān)系，可能有多級父子

像 element 和 iview 多設(shè)計了一個 mixins，里面提供了一個方法：dispatch

它接受 3 個參數(shù)：

componentName 組件名

eventName 自定義事件名稱

params 事件傳遞的參數(shù)

dispatch(componentName, eventName, params) {
}

比如類似 input-number，很多這種表單內(nèi)嵌的組件，都會設(shè)計和 FormItem 的互動：

this.dispatch("FormItem", "on-form-change", val);

我們在設(shè)計 FormItem組件的時候，注意：

export default {
    name: "FormItem"
}

然后注冊一個自定義事件，方式也是一樣的：

我們來看一下 dispatch 函數(shù)的內(nèi)部：

思路是一層一層往上找父元素：

$parent -- 父實例

$root -- 組件樹的根 Vue 實例

var parent = this.$parent || this.$root;

獲取父組件的 name:

var name = parent.$options.name;

開始循環(huán)判斷：

while (parent && (!name || name !== componentName)) {
    // ...
}

比如上面的input-number 內(nèi)部調(diào)用了 dispatch，傳入了參數(shù)，就是一直找父元素 name 為 FormItem 的

在 while 的內(nèi)部：

接著找它的父示例，然后獲取 name

parent = parent.$parent;
if (parent) {
    name = parent.$options.name;
}

最終如果找到了：

和最開始觸發(fā)自定義事件是一樣的：$emit

if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
}

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

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

相關(guān)文章

  • 少女風(fēng)vue組件庫制作全攻略~~

    摘要：組件監(jiān)聽自定義事件。組件觸發(fā)自定義事件。生命周期鉤子函數(shù)，后組件的所有的事件監(jiān)聽器會被移除。技術(shù)點總結(jié)組件設(shè)計的思想包括單數(shù)據(jù)流事件中心，核心是組件通信。完善給彈出日期面板和關(guān)閉日期面板增加組件自定義事件即調(diào)用觸發(fā)和事件。預(yù)覽 組件庫官網(wǎng) github地址 如果喜歡各位小哥哥小姐姐給個小星星鼓勵一下哈， 請勿在生產(chǎn)環(huán)境中使用，供學(xué)習(xí)&交流~~ showImg(https://user...

    springDevBird 評論0 收藏0

  • 前端開發(fā)知識點整理

    摘要：前言本文主要是有關(guān)前端方面知識按照目前的認(rèn)知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認(rèn)知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 評論0 收藏0

  • 前端開發(fā)知識點整理

    摘要：前言本文主要是有關(guān)前端方面知識按照目前的認(rèn)知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認(rèn)知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...

    Sike 評論0 收藏0

  • 前端開發(fā)知識點整理

    摘要：前言本文主要是有關(guān)前端方面知識按照目前的認(rèn)知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認(rèn)知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...

    tracy 評論0 收藏0

  • VUE

    摘要：注意指令前面需要加，對指令傳遞數(shù)據(jù)賦值使用例如約定速成加上，表示自定義指令不要使用駝峰式命名。需要通過方法實現(xiàn)自定義指令注冊完成。 vue Vue.js 構(gòu)建數(shù)據(jù)驅(qū)動的web界面庫。集中實現(xiàn)MVVM 的 VM層。容易與其他庫或項目整合 通過盡可能簡單的API實現(xiàn)相應(yīng)的數(shù)據(jù)綁定和組合的視圖組件核心：相應(yīng)的數(shù)據(jù)綁定系統(tǒng)， 數(shù)據(jù)與DOM保持同步數(shù)據(jù)驅(qū)動的視圖，普通的HTML模板中使用特殊的語...

    bergwhite 評論0 收藏0

發(fā)表評論

0條評論

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