Vue 3 -如何在自定义指令中的绑定示例上执行函数

oaxa6hgo  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(137)

我正在main.ts中创建一个自定义指令,如下所示

let handleOutsideClick: any;
app.directive("closable", {
  mounted: (el, binding, vnode) => {
    handleOutsideClick = (e: any) => {
      e.stopPropagation();

      const payload = binding.value;

      console.log(`instance: ${Object.getOwnPropertyNames(binding.instance)}`);
    };

    document.addEventListener("click", handleOutsideClick);
  },
  unmounted: (el) => {
    document.removeEventListener("click", handleOutsideClick);
  },
});

字符串
在事件处理程序中,我想调用触发此指令的组件上的一个函数。
在Vue 2中,你可以使用vnode.context'myfunction'来实现,但这似乎不适用于binding.instance。
如何使用绑定示例调用函数?

plicqrtu

plicqrtu1#

传递要调用的函数作为绑定的值,然后调用它似乎可以工作:

if (typeof binding.value === 'function') {
  binding.value()
}

字符串
工作示例:

const { createApp } = Vue;

const app = createApp({
  setup() {
    return { test: () => console.log('here') }
  }
})

app.component('demo', {
  template: `<div>test</div>`
})

let handleOutsideClick;
app.directive("closable", {
  mounted: (el, binding, vnode) => {
    handleOutsideClick = (e) => {
      e.stopPropagation();

      const payload = binding.value;

      console.log(`instance: ${Object.getOwnPropertyNames(binding.instance)}`);
      if (typeof binding.value === 'function') {
        binding.value()
      }
    };

    document.addEventListener("click", handleOutsideClick);
  },
  beforeUnmount: (el) => {
    document.removeEventListener("click", handleOutsideClick);
  },
});

app.mount('#app')
<script src="https://unpkg.com/vue@3.2.41/dist/vue.global.prod.js"></script>
<div id="app">
  <demo v-closable="test"></demo>
</div>

的数据
备注:

  • vue内部方法名称会根据环境而改变。例如,如果在上面的示例中从vue链接中删除.prod,您将从Object.getOwnPropertyNames(binding.instance)中获得更多数据。

如果你的应用的业务逻辑依赖于vue内部的方法命名:
**a)*你 * 做错了™;
**B)**在生产环境中不起作用

如果你需要一个多文件节点的在线编辑器,请注意codesandbox.io允许使用CLI工具导入本地项目。

相关问题