vue自定义事件

版权声明：三和小钢炮 https://blog.csdn.net/fwx426328/article/details/83179091

01 vue中自定义指令

vue指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

02 标准浏览器自定义事件触发方法

w3 Event对象

document.createEvent()
event.initEvent()
element.dispatchEvent()

03 vue中实现自定义事件

结合上面两种方法，可以下面写：

<script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script>

<div id="app">
  <div id="box" v-proxyclick @proxyclick="test(12)">点击</div>
</div>

<script type="text/javascript">
Vue.directive('proxyclick', {
  bind: function (el, binding, vnode) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("proxyclick", false, false);
    el.addEventListener('click', function(e) {
      e.target.dispatchEvent(evt);
    }, false);
  }
});
new Vue({
  el: '#app',
  methods: {
    test: function(num) {
      alert(num);
    }
  }
});
</script>