如何从指令 Vue.js 调用元素的方法并传递参数？答案

【问题标题】：How to call the method of element and pass arguments from directive Vue.js?如何从指令 Vue.js 调用元素的方法并传递参数？
【发布时间】：2020-01-30 13:17:57
【问题描述】：

我需要从指令中调用元素的方法并将一些参数传递给该方法。

<div id="app">
  <div >
    <button
            @mousetrapped="trapped"
            v-keyboardtrap
          >
              keyboardtrap
    </button>
  <div/>
</div>

<script>
Vue.directive('keyboardtrap', {
  bind: function (el, binding, vnode) {
    el.addEventListener('keydown', onKeyDown);

    function onKeyDown(e) {
      vnode.context.$emit('mousetrapped', e)
    }
  },
})

new Vue({
  el: '#app',
  methods: {
    trapped (e) {
      alert('trapped' + e)
    }
  }
});
</script>

codepen 上的这个例子：https://codepen.io/4e4e4i/pen/OJLewNr

【问题讨论】：

你想要达到什么目的（功能性）？因为按钮上已经有一个@click 事件？
@dreijntjens，这只是示例，我需要捕获 keydown 事件，然后从指令中的组件调用方法并在那里传递一些参数

标签： vue.js

【解决方案1】：

对于我的解决方案。你需要传递参数数据是needToPassDatas

<div id="app">
  <div>
      <button @mousetrapped="trapped"  v-keyboardtrap="needToPassDatas">
          keyboardtrap
      </button>
  <div/>
</div>

Vue.directive('keyboardtrap', {
  bind: function (el, binding, vnode) {

    el.addEventListener('keydown', onKeyDown);

    function onKeyDown(e) {
       var handlers = (vnode.data && vnode.data.on) ||
                      (vnode.componentOptions && vnode.componentOptions.listeners);

       if (handlers && handlers['mousetrapped']) {
          handlers['mousetrapped'].fns(binding.value);
       }
    }
  },
})

new Vue({
  el: '#app',
  methods: {
    trapped (e) {
      alert('trapped' + e)
    }
  }
})

参考：vuejs.org Dynamic Directive Arguments、stackoverflow.com Trigger emit in directive method

【讨论】：

我完全改变了，请立即尝试
我完全改变了那个被困方法警报。请立即尝试@4e4e4i