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

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

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

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

请注意，使用此模板：

<div id="app">
  <h2>directive test</h2>
  <component-a v-on:emited-event="parentClickEvent"></component-a> 
</div>

由于事件是从组件a发出的，因此根组件必须定义parentClickEvent方法。您还需要从component-a

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

或使用$ root对象发出和侦听相同级别的事件（https://stackoverflow.com/questions/50181858/this-root-emit-not-working-in-vue）

2. $ emit呼叫应广播一个烤肉串事件，否则该事件将不会发生-

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

1 个答案: