成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

yzd / 2536人閱讀

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

我們拿 input-number 為例：

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

我們使用組件的時(shí)候，會(huì)注冊(cè)了一個(gè)自定義的事件：

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

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

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

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

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

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

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

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

componentName 組件名

eventName 自定義事件名稱

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

dispatch(componentName, eventName, params) {
}

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

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

我們?cè)谠O(shè)計(jì) FormItem組件的時(shí)候，注意：

export default {
    name: "FormItem"
}

然后注冊(cè)一個(gè)自定義事件，方式也是一樣的：

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

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

$parent -- 父實(shí)例

$root -- 組件樹的根 Vue 實(shí)例

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97639.html

相關(guān)文章

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

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

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

  • 前端開發(fā)知識(shí)點(diǎn)整理

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

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

  • 前端開發(fā)知識(shí)點(diǎn)整理

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

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

  • 前端開發(fā)知識(shí)點(diǎn)整理

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

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

  • VUE

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<