一般情况下，父组件要监听子组件的事件，可以通过$emit的方式。但是如果父组件要监听子组件的原生事件，比如：input的focus事件。此时可以通过使用v-on的.native修饰符达到目的。

.native 可以在某组件的根元素上监听一个原生事件

从上面的语句可以看出，.native作用于组件的根元素。
所以如果需要监听的元素是作为根元素，此时.native完全适用
例如：
父组件

<template>
  <div id="app">
    <baseLabel  v-on:focus.native="onFocus"/>
  </div>
</template>

<script>
import baseLabel from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    baseLabel
  },
  methods: {
    onFocus() {
      console.log('lalalalal');
    }
  }
}
</script>

子组件：

<template>
    <input type="text"/>
</template>

<script>
export default {
  name: 'baseLabel',
}
</script>

效果：

但是如果目标预监听的元素不是根元素，那么.native可能会失效，此时可以利用$emit的方法，通过使用‘$listeners来获得父组件在子组件上加上的除.native的事件。 子组件则监听这些事件，当事件发生通知父组件 这个时候就不需要使用.native`修饰符就可以监听原生事件了
实例:
父组件

<template>
  <div id="app">
    <baseLabel  v-on:focus="onFocus"/>
  </div>
</template>

<script>
import baseLabel from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    baseLabel
  },
  methods: {
    onFocus() {
      console.log('lalalalal');
    }
  }
}
</script>

子组件

<template>
    <label>
      <input v-on="inputListeners"/>
    </label>
</template>

<script>
export default {
  name: 'baseLabel',
  computed: {
    inputListeners() {
      var vm = this
      // 将所有的对象整合在一起
      return Object.assign({},
      // 从父组件添加所有的监听器
      this.$listeners,
      // 添加自定义的监听器
      {
      // 确保v-model正常工作
        input(event) {
          vm.$emit('input',event.target.value)
        }
      })
    }
  }
}
</script>