Vue教程之子组件绑定原生事件

在Vue中，当我们绑定事件到子组件的时候，我们会发现竟然触发不了，这个因为子组件把我们绑定的事件，当成了需要子组件来进行触发的一个事件，因为你父组件去点击的时候，是无法无法触发，得使用前面咱们介绍的子组件使用 $emit 来触发父组件在子组件上定义的这个事件，当然对于普通的 DOM 标签元素来说，是不会有这种情况的。

当然在我们的开发过程中，肯定会遇到在子组件绑定原生事件的情况，因此我们是需要使用 native 来触发子组件上的原生事件。例如：

父组件

<template>
  <div>
    <Demo7 @click.native="handleClick"></Demo7>
  </div>
</template>

<script>
import Demo7 from './components/Demo7'
export default {
  methods: {
    handleClick () {
      console.log('handleClick')
    }
  },
  components: {
    Demo7
  }
}
</script>

子组件

<template>
  <div>
    <h1>test</h1>
  </div>
</template>