Vue.js 中如何从组件触发指令事件？

vue.js

2024-03-26 20:57:22

在 Vue.js 中从组件中触发指令事件

前言

在 Vue.js 中，指令和组件是实现交互式和可重用代码的强大工具。有时，我们需要从组件中触发指令中的事件。然而，直接使用 vnode.context.$emit('bar') 可能无法触发事件。

解决方法

有几种方法可以从指令中触发事件：

使用 `vnode.$emit('bar')`

vnode 对象包含对组件实例的引用。我们可以直接使用 vnode.$emit('bar') 触发事件。

使用 `vnode.data.on.bar.fn()`

vnode.data.on 包含指令的事件处理程序。我们可以直接调用处理程序函数来触发事件。

在 Vue 2.x 中，事件处理程序函数名为 fn，而在 Vue 3.x 中，该函数名为 fns。

其他方法

除了上述方法外，还有一些其他方法可以从指令中触发事件：

使用 $root.$emit('bar')： 如果指令附加到组件的根元素，可以使用 $root.$emit('bar') 触发事件。
使用 Vue.prototype.$emit('bar')： 可以定义一个自定义事件处理程序在 Vue 实例的原型上，然后在指令中触发它。

案例分析

考虑以下示例：

// 指令
Vue.directive('foo', {
  bind(el, binding, vnode) {
    setTimeout(() => {
      // 方法 1：直接触发事件
      vnode.$emit('bar');

      // 方法 2：调用事件处理程序函数
      // vnode.data.on.bar.fn(); // Vue 2.x
      vnode.data.on.bar.fns(); // Vue 3.x
    }, 3000);
  }
});

// 组件
export default {
  data() {
    return {
      label: '我不起作用'
    }
  },
  methods: {
    change() {
      this.label = '我工作了！';
    }
  }
};