Vue中.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>

<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>