我如何通过在元素外部单击来从指令中发出事件？

Question

我不明白如何从指令中发出事件

这是我尝试调用方法的模板：

<tooltip v-click-outside="clickEvent" v-on:emitedEvent="clickEvent"></tooltip>

从 v-click-outside="clickEvent" 我得到：

Property or method "clickEvent" is not defined on the instance but referenced during render.

我的代码：

export default {
  data() {
    return {
    }
  },
  methods: {
    clickEvent: function () {
      console.log('click')
    }
  },
}
Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.event = function (event) {
      if (!(el.contains(event.target))) {
          vnode.context.$emit('emitedEvent')
      }
    }
    document.addEventListener('click', el.event)
  },
  unbind: function (el) {
    document.removeEventListener('click', el.event)
  },
})

我得到：

Invalid handler for event "emitedEvent": got undefined

Answer 1

我怀疑您遇到的问题主要基于两个问题：

1. 您定义函数的级别
2. 不支持驼峰案例自定义事件（始终使用 kebab 案例 - https://v2.vuejs.org/v2/guide/components-custom-events.html#Event-Names ）

查看以下小提琴 - https://jsfiddle.net/chrismarx/gvrsmj1y/7/

请注意，使用此模板：

  template:'<button type="button" @click="clickEvent" v-click-outside>test</button>',

1. 根组件必须定义 parentClickEvent 方法，因为事件是从组件 a 发出的。 您还需要从 component-a 中发出事件

 template:'<button type="button" @click="clickEvent" v-click-outside>test</button>',

或使用 $root 对象在同一级别发出和侦听事件（ this.$root.$emit 在 Vue 中不起作用）

2. $emit 调用应该广播一个 kebab cased 事件，否则该事件将不会被接收 -