事件修饰符 .native

       在vue2中，父组件在子组件标签中添加一个事件，若子组件没有$emit抛出该事件又想触发父组件的事件，这时候就需要事件修饰符了

 Module.vue

<template>
  <button>按钮</button>
</template>

<script>
export default {

}
</script>

App.vue

<template>
  <div id="app">
    <Native @click="fn"/>
  </div>
</template>

<script>
import Native from './components/Native.vue';
export default {
  name: 'App',
  components: {
    Native
  },
  methods:{
    fn(){
      console.log('事件触发')
    }
  }
}
</script>

这个时候点击按钮是无法触发事件的

当我们在@click后面加上.native时

App.vue

<template>
  <div id="app">
    <Module @click.native="fn"/>
  </div>
</template>

<script>
import Module from './components/Module.vue';
export default {
  name: 'App',
  components: {
    Module
  },
  methods:{
    fn(){
      console.log('事件触发')
    }
  }
}
</script>

这时，点击子组件中的按钮就可以触发父组件里的事件了