我有一个简单的指令:
.HTML:
<div id="app">
<div v-sample:callback="greet"></div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
files: [],
},
methods: {
greet: function (arg) {
alert(arg);
},
},
});
</script>
.JS:
Vue.directive('sample', {
bind: function (el, binding, vnode) {
el.addEventListener('...', function () {
// ...
callback.call(arg, ...);
});
},
});
但是,我不清楚获取函数和评估的适当语法。从指令中执行此操作的正确方法是什么?
您可以使用binding.value
在这种情况下应该是一个函数。它已经预先绑定到正确的上下文,所以只需调用它(如果需要,可以在其中传递任何内容(:
Vue.directive('sample', {
bind: function (el, binding, vnode) {
el.addEventListener('click', function () {
binding.value()
});
},
});
在 Nuxt3 + Vue3 上工作
// Run this module from some defineNuxtPlugin config (client only)
export default (vueInstance) => {
// Click outside some element
vueInstance.directive('click-outside', {
created(el, binding, vnode, prevVnode) {
el.clickOutsideEvent = function (event) {
console.log(binding.instance.close)
if (!(el == event.target || el.contains(event.target))) {
if(binding.instance[binding.value]) {
binding.instance[binding.value](event)
}
}
}
document.body.addEventListener('click', el.clickOutsideEvent)
},
beforeUnmount(el, binding, vnode, prevVnode) {
document.body.removeEventListener('click', el.clickOutsideEvent)
}
})
}
<div v-click-outside="'close'">
</div>
也许你可以这样做。
<div v-mydirect:fn="params"></div>
Vue.directive('mydirect', {
bind (el, binding,vnode) {
let that = vnode.context
that[binding.arg](binding.value)
}
})