将原生事件绑定到组件

1在一个组件的根元素上直接监听一个原生事件 加.native (注意只能绑定在根元素上)

<base-input   @focus.native="onFocus"></base-input>
 Vue.component('base-input',{
      template:` 
          <input  /> 
      `
 })

2.如果你想绑定不是根元素上的，需要换种方法要用到 vm.$listeners

(包含了父作用域中的 v-on 事件监听器 ,它可以通过 v-on="$listeners" 绑定到你要绑定的标签上，特别注意不包含 .native)

  <base-input  v-model='wcValue'   @focus="onFocus"></base-input>
{{wcValue}}
 
  Vue.component('base-input', {
      inheritAttrs: false,
      props: ['value'],
      computed: {
        inputListeners: function () { 
          var vm = this
          // `Object.assign` 将所有的对象合并为一个新对象
          return Object.assign({},
            // 我们从父级添加所有的监听器
            this.$listeners,
            // 然后我们添加自定义监听器，
            // 或覆写一些监听器的行为
            {
              // 这里确保组件配合 `v-model` 的工作
              input: function (event) {
                vm.$emit('input', event.target.value)
              }
            }
          )
        }
      },
      template: `
        <label> 
          <input 
            v-bind:value="value"
            v-on="inputListeners"
          >
        </label>
      `,
      created:function(){ 
        console.log(this.inputListeners)
      }
    })

var vm = new Vue({
  el:'#app',
  data:{
      wcValue:''
  },
  methods:{
    onFocus:function(){
      console.log(1111)
    }
  }
})