Vue自定義指令的解綁過(guò)程非常簡(jiǎn)單,只需要在指令函數(shù)中返回一個(gè)函數(shù),在該組件銷(xiāo)毀前調(diào)用即可。下面是一個(gè)示例。
Vue.directive('my-directive', { bind: function (el, binding, vnode) { // 指令綁定到元素時(shí)調(diào)用 }, inserted: function (el, binding, vnode) { // 元素插入到父節(jié)點(diǎn)時(shí)調(diào)用 }, update: function (el, binding, vnode, oldVnode) { // 組件更新時(shí)調(diào)用,可能會(huì)觸發(fā)多次 }, componentUpdated: function (el, binding, vnode, oldVnode) { // 組件更新時(shí)調(diào)用,只觸發(fā)一次 }, unbind: function (el, binding, vnode) { // 解綁指令時(shí)調(diào)用 // 在這里返回一個(gè)函數(shù),在組件銷(xiāo)毀前調(diào)用,可以執(zhí)行一些清理工作 return function() { // 清理工作 } } })
在上面的示例中,我們?cè)趗nbind函數(shù)中返回了一個(gè)函數(shù),這個(gè)函數(shù)可以在組件銷(xiāo)毀的時(shí)候被調(diào)用,執(zhí)行一些清理工作。下面是一個(gè)示例,可以更好地說(shuō)明這個(gè)過(guò)程。
Vue.directive('my-directive', { bind: function (el) { // 綁定時(shí)更新 DOM el.classList.add('my-directive') }, unbind: function (el) { // 解綁時(shí)移除 DOM el.classList.remove('my-directive') } })
在上面的指令中,我們?cè)谥噶罱壎ǖ皆貢r(shí),為元素添加了一個(gè)class,而在指令解綁時(shí),又從元素中移除了這個(gè)class,以此來(lái)完成清理工作。
總之,在Vue自定義指令中解綁指令非常方便,只需要在指令函數(shù)中返回一個(gè)函數(shù),并在組件銷(xiāo)毀前調(diào)用即可。這樣可以執(zhí)行一些清理工作,保證組件的健壯性。