Vue组件绑定原生事件

JavaScript 2019-03-12 1932 0
18:37:04

Vue组件绑定原生事件

vue组件绑定原生事件?正常情况下我们想给一个组件绑定事件需要这样来写,首先需要通过$emit向上触发事件,然后监听事件,最后才会执行方法函数,比如下面这样的:

  1. <div id="root">
  2.         <child @click="handleClick"></child>
  3.     </div>
  4.     <script>
  5.         Vue.component('child',{
  6.             template: '<div @click="handleChildClick">child</div>',
  7.             methods: {
  8.                 handleChildClick: function () {
  9.                     this.$emit('click')
  10.                 }
  11.             }
  12.         })
  13.         var vm = new Vue({
  14.             el: '#root',
  15.             methods: {
  16.                 handleClick: function () {
  17.                     alert('handleClick方法')
  18.                 }
  19.             }
  20.         })
  21.     </script>

然后点击组件就会执行  alert('handleClick方法'),但是发现没,这样的话很麻烦,那么有没有更简单的执行方法呢?有的,就是这样,添加一个.native修饰符,如下:

  1. <div id="root">
  2.         <child @click.native="handleClick"></child>
  3.     </div>
  4.     <script>
  5.         Vue.component('child',{
  6.             template: '<div>child</div>'
  7.         })
  8.         var vm = new Vue({
  9.             el: '#root',
  10.             methods: {
  11.                 handleClick: function () {
  12.                     alert('handleClick方法')
  13.                 }
  14.             }
  15.         })
  16.     </script>

这样一来,就是一个原生的点击事件,是不是很方便呢?

 

发表评论