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

資訊專欄INFORMATION COLUMN

vue -on如何綁定多個(gè)事件

jzman / 2514人閱讀

摘要：參數(shù)數(shù)組只在中支持用法監(jiān)聽當(dāng)前實(shí)例上的自定義事件。事件可以由觸發(fā)。回調(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。指令綁定的前一個(gè)值，僅在和鉤子中可用。

參數(shù)：

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

用法：

監(jiān)聽當(dāng)前實(shí)例上的自定義事件。事件可以由vm.$emit觸發(fā)。回調(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。

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

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

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

因?yàn)閡pdate的緣故，所以必須講原來綁定的函數(shù)解綁再綁定一次，以免造成重復(fù)觸發(fā)回調(diào)

漫漫前端路，共勉

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

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

相關(guān)文章

  • 【收藏】2019年最新Vue相關(guān)精品開源項(xiàng)目庫(kù)匯總

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

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

  • 推薦給新手的35個(gè)好用的Vue開源庫(kù)

    摘要：無(wú)論是開發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開源軟件包。所幸的是，隨著社區(qū)的不斷壯大，每天都會(huì)出現(xiàn)一些很好的軟件包。在下文中，我們將推薦一些非常好用的開源庫(kù)是一個(gè)非常易用的漸進(jìn)式框架，用于構(gòu)建用戶界面。的一個(gè)極簡(jiǎn)主義的深色設(shè)計(jì)系統(tǒng)。 無(wú)論是開發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開源軟件包。對(duì)于開發(fā)者來說，如果沒有這些開源軟件包，很難想象我們的生活會(huì)變得多么疲憊不堪，而且靠咖啡度日也會(huì)成...

    oliverhuang 評(píng)論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 評(píng)論0 收藏0

  • 用 Vue 來寫 React 和 ReactNative

    摘要：的響應(yīng)核心的響應(yīng)式系統(tǒng)是支撐整個(gè)框架運(yùn)行的關(guān)鍵，也是的核心之一，官方對(duì)這個(gè)核心的分層設(shè)計(jì)得很好也是依靠其驅(qū)動(dòng)原生視圖。我們?nèi)粘Ｓ玫降亩加珊诵奶峁?，?duì)這個(gè)核心稍作修改，去掉和，意外的獲得了一個(gè)極小的響應(yīng)核心，可以運(yùn)行于任何標(biāo)準(zhǔn)引擎下。 showImg(https://segmentfault.com/img/bVPMZy?w=1468&h=826); GitHub: react-vue ...

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

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

0條評(píng)論

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