vue -on如何綁定多個事件

jzman 發布于2019-08-23 14:53 / 2506人閱讀

摘要：參數數組只在中支持用法監聽當前實例上的自定義事件。事件可以由觸發。回調函數會接收所有傳入事件觸發函數的額外參數。指令綁定的前一個值，僅在和鉤子中可用。

參數：

{string | Array} event (數組只在 2.2.0+ 中支持)
{Function} callback

用法：

監聽當前實例上的自定義事件。事件可以由vm.$emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數。

vue-on的api，就是說v-on只能傳入單個健值對，如果要一次性綁定多個事件，那只能使用@onError=function @onChange=function這樣的操作，可是這么做看起來不直接，當我們想把事件的方法統一起來，或者通過組件傳遞事件方法就有些棘手了

在講代碼之前我們先了解一下vnode和directive，vnode是vue的虛擬dom，具體的實現和原理有興趣的同學可以的了解一下，這里我們要講一下vode上暴露的方法，vnode.componentInstance: Component | void; // component instance，what?這個是什么東西，這個東西是當前節點對應的組件的實例，也就是說等同于vm。這里要知道vue的api方法不僅可以在template中使用，也可以在class中使用的，也是時說你可以@onChange=function，也可vm.on("on-change",function),重要的是你要開心，這里注意在實例上的方法要使用橫線命名的方法，等同于template的駝峰寫法。好啦，現在我們說了這么多，沒有vnode有什么用啊，....，好吧，那先開始講如何獲取vnode，前面說到directive，讓我們看一下它的回調函數暴露的參數

指令鉤子函數會被傳入以下參數：
el：指令所綁定的元素，可以用來直接操作 DOM 。
binding：一個對象，包含以下屬性：
name：指令名，不包括 v- 前綴。
value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

是的，你看到了vnode，剩下的不用我說了吧

上代碼

Vue.directive("events", function (el,binding,vnode) {
    let {events} = binding.value || {};
    for(let i in events) {
        if (events.hasOwnOroperty(i)) {
            let v = events[i];
            let k = i.replace(/[A-Z]/g, match=>`-${match.toLowerCase()}`);
            vnode.vnode.componentInstance.$off(k, v);
            vnode.vnode.componentInstance.$on(k, v);
        }
    }
  }
)

因為update的緣故，所以必須講原來綁定的函數解綁再綁定一次，以免造成重復觸發回調

漫漫前端路，共勉

云服務器 GPU云服務器 Vue_Vue Vue vue3 學習筆記 (五)——vue3 _vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101296.html

【收藏】2019年最新Vue相關精品開源項目庫匯總

摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內容早已過期或是很多近期優秀組件未被收錄，所以小肆今天重新更新了內容并新建項目。提交的項目格式如下項目名稱子標題相關介紹如果收錄的項目有錯誤，可以通過反饋給小肆。前言本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內容早已過期或是很多近期優...

williamwen1986 2019-08-23 14:50 評論0 收藏0
推薦給新手的35個好用的Vue開源庫

摘要：無論是開發新手還是經驗豐富的老手，我們都喜歡開源軟件包。所幸的是，隨著社區的不斷壯大，每天都會出現一些很好的軟件包。在下文中，我們將推薦一些非常好用的開源庫是一個非常易用的漸進式框架，用于構建用戶界面。的一個極簡主義的深色設計系統。無論是開發新手還是經驗豐富的老手，我們都喜歡開源軟件包。對于開發者來說，如果沒有這些開源軟件包，很難想象我們的生活會變得多么疲憊不堪，而且靠咖啡度日也會成...

oliverhuang 2019-08-23 14:59 評論0 收藏0
Nuxt.js按需引入 emement-ui

摘要：全面配置文章系列安裝依賴修改修改 ???nuxt.js全面配置??? ???nuxt文章系列??? babel-plugin-component 安裝依賴 npm i -D babel-plugin-component // or yarn add -D babel-plugin-component 修改nuxt.config.js module.exports = { bui...

microcosm1994 2019-08-23 14:08 評論0 收藏0
用 Vue 來寫 React 和 ReactNative

摘要：的響應核心的響應式系統是支撐整個框架運行的關鍵，也是的核心之一，官方對這個核心的分層設計得很好也是依靠其驅動原生視圖。我們日常用到的都由核心提供，對這個核心稍作修改，去掉和，意外的獲得了一個極小的響應核心，可以運行于任何標準引擎下。 showImg(https://segmentfault.com/img/bVPMZy?w=1468&h=826); GitHub: react-vue ...

maybe_009 2019-08-20 17:33 評論0 收藏0