資訊專欄INFORMATION COLUMN
摘要：參數(shù)數(shù)組只在中支持用法監(jiān)聽當(dāng)前實例上的自定義事件。事件可以由觸發(fā)?；卣{(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。指令綁定的前一個值，僅在和鉤子中可用。
參數(shù)：
{string | Array} event (數(shù)組只在 2.2.0+ 中支持)
{Function} callback
用法：
監(jiān)聽當(dāng)前實例上的自定義事件。事件可以由vm.$emit觸發(fā)?；卣{(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。
vue-on的api，就是說v-on只能傳入單個健值對，如果要一次性綁定多個事件，那只能使用@onError=function @onChange=function這樣的操作，可是這么做看起來不直接，當(dāng)我們想把事件的方法統(tǒng)一起來，或者通過組件傳遞事件方法就有些棘手了
在講代碼之前我們先了解一下vnode和directive，vnode是vue的虛擬dom，具體的實現(xiàn)和原理有興趣的同學(xué)可以的了解一下，這里我們要講一下vode上暴露的方法，vnode.componentInstance: Component | void; // component instance，what?這個是什么東西，這個東西是當(dāng)前節(jié)點對應(yīng)的組件的實例，也就是說等同于vm。這里要知道vue的api方法不僅可以在template中使用，也可以在class中使用的，也是時說你可以@onChange=function，也可vm.on("on-change",function),重要的是你要開心，這里注意在實例上的方法要使用橫線命名的方法，等同于template的駝峰寫法。好啦，現(xiàn)在我們說了這么多，沒有vnode有什么用啊，....，好吧，那先開始講如何獲取vnode，前面說到directive，讓我們看一下它的回調(diào)函數(shù)暴露的參數(shù)
指令鉤子函數(shù)會被傳入以下參數(shù)：
el：指令所綁定的元素，可以用來直接操作 DOM 。
binding：一個對象，包含以下屬性：
name：指令名，不包括 v- 前綴。
value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節(jié)點，僅在 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的緣故，所以必須講原來綁定的函數(shù)解綁再綁定一次，以免造成重復(fù)觸發(fā)回調(diào)
漫漫前端路，共勉
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/101296.html
摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內(nèi)容早已過期或是很多近期優(yōu)秀組件未被收錄，所以小肆今天重新更新了內(nèi)容并新建項目。提交的項目格式如下項目名稱子標(biāo)題相關(guān)介紹如果收錄的項目有錯誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內(nèi)容早已過期或是很多近期優(yōu)...
摘要：無論是開發(fā)新手還是經(jīng)驗豐富的老手，我們都喜歡開源軟件包。所幸的是，隨著社區(qū)的不斷壯大，每天都會出現(xiàn)一些很好的軟件包。在下文中，我們將推薦一些非常好用的開源庫是一個非常易用的漸進式框架，用于構(gòu)建用戶界面。的一個極簡主義的深色設(shè)計系統(tǒng)。 無論是開發(fā)新手還是經(jīng)驗豐富的老手，我們都喜歡開源軟件包。對于開發(fā)者來說，如果沒有這些開源軟件包，很難想象我們的生活會變得多么疲憊不堪，而且靠咖啡度日也會成...
摘要：全面配置文章系列安裝依賴修改修改 ???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...
摘要：的響應(yīng)核心的響應(yīng)式系統(tǒng)是支撐整個框架運行的關(guān)鍵，也是的核心之一，官方對這個核心的分層設(shè)計得很好也是依靠其驅(qū)動原生視圖。我們?nèi)粘Ｓ玫降亩加珊诵奶峁?，對這個核心稍作修改，去掉和，意外的獲得了一個極小的響應(yīng)核心，可以運行于任何標(biāo)準(zhǔn)引擎下。 showImg(https://segmentfault.com/img/bVPMZy?w=1468&h=826); GitHub: react-vue ...
閱讀 2938·2021-11-16 11:55
閱讀 2707·2021-09-29 09:34
閱讀 3627·2021-09-01 14:21
閱讀 3880·2019-08-29 12:36
閱讀 753·2019-08-26 10:55
閱讀 4127·2019-08-26 10:20
閱讀 1096·2019-08-23 18:19
閱讀 1256·2019-08-23 17:56
