临时：vue将原生事件绑定到组件

Posted 2020-11-29 gushixianqiancheng

来源https://blog.csdn.net/qq_24147051/article/details/89879282

首先我们定义一个 child 组件，什么事件都不绑定，代码如下：

    Vue.component(‘child‘, {
      template: ‘<button>click me</button>‘
    })
   // 然后我们在根组件中使用它，代码如下：
    
    <div id="app">
      <child></child>
    </div>
    new Vue({
      el: ‘#app‘
    })
1
2
3
4
5
6
7
8
9
10
11
正常情况下，我们点击 按钮 什么都不会发生对吧？
好，接下来呢，我们给 child 组件增加一个 @click 事件，代码如下：

    <div id="app">
      <child @click="handleClick"></child>
    </div>
1
2
3
那么，这个 handleClick 方法是谁的呢？不用问，当然是父作用域下的方法啦，所以我们在根组件中增加一个方法，代码如下：


    new Vue({
      el: ‘#app‘,
      methods: {
        handleClick () {
          alert(‘hello,world!‘)
        }
      }
    })
1
2
3
4
5
6
7
8
9
可是呢，当你再次点击按钮的时候发现，没有 hello, world! 没有弹出，也就是说 handleClick 方法根本没有执行。别急！这个时候 .native 修饰符就派上用场了，我们在 @click 加上这个修饰符试试，代码如下：

    <div id="app">
      <child @click.native="handleClick"></child>
    </div>
1
2
3
再点击一下看看效果吧！是不是就出来了？ .native 修饰符的官方解释是： 监听组件根元素的原生事件！
当然，如果不用 .native 修饰符，我们也可以通过 $emit 事件派发给父组件也是可以的，代码如下：


    <div id="app">
      <child @click="handleClick"></child>
    </div>
// .native 修饰符 demo

    Vue.component(‘child‘, {
      template: ‘<button @click="click">click me </button>‘,
      methods: {
        click () {
          this.$emit(‘click‘, ‘i from child...‘)
        }
      }
    })
    
    new Vue({
      el: ‘#app‘,
      methods: {
        handleClick (val) {
          console.log(val) // ‘i from child...‘
        }
      }
    })