Vue的官方自定義directive,基本調用簡潔如下:
Vue.directive('my-directive', { bind: function () {},// 指令與被綁定元素第一次綁定時觸發,通常做一些事件監聽的初始化 inserted: function () {},// 綁定元素插入父節點時調用(父節點存在即可調用,不必存在於 document 中)。 update: function () {},// 被綁定元素內容發生變化時觸發,可接受參數,在這里也可以進行事件監聽的初始化 componentUpdated: function () {},// 被綁定元素所在模板完成一次更新周期時調用。 unbind: function () {}// 指令與元素解綁時觸發,比如通過路由轉跳頁面時需要解綁指令 })
在某些組件中,類似於elment-ui中的checkbox多選按鈕,里面的給出的api並沒有click事件,只能通過change事件(也就是選中和未選中切換時觸發)來進行一些操作,這里如果有一個必須點擊觸發的需求的話,那就可以用自定義指令重新賦予點擊事件初步解決,當然這里主要是看它如何回調反作用於當前Vnode(當前頁面);
<el-checkbox v-banSlect="{fn:checkSlect}">test</el-checkbox> directives:{//這里面沒有定義this對象 banSlect:{ bind(el,bind,vnode){ }, update(el,bind){ fn.call(null,mval,val,code,item,oldval);//這里就是運行fn
//只要dom刷新,update就會觸發,即使值沒有改變 }, unbind(){ } } }, methods: { checkSlect(){alert(“已回調”) console.log(this)//這里就是改組件的VueComponent對象 } }, },
通過上面的方法就可以使自定義的方法和整個組件關聯了,想調用組件里面的方法,就只能通過對象字面量吧函數方法傳給bind里面,然后在相應狀態(這里是update)調用該方法,這里面有點奇怪的是checkSlect里面的this是有值的,update里是沒this定義的,直接運行的checkSlect或者用上文的call,理論上是this是指向Windows(非嚴格模式),但這里this指向的是VueComponent對象,從效果上來說就是我們想要的效果,至於原因,我后面再跟進。
總而言之,通過對象字面量傳遞函數方法或者屬性變量來關聯自定義的指令和組件。