vue官方文档（16) :将原生事件绑定到组件

模仿官网的代码写的，代码细节还没太懂

<template>
  <div >
<base-input v-on:focus="onFocus" v-on:input="onInput"/>

</div>


</template>


<script>

// eslint-disable-next-line
//import { Lazyload } from 'vant';
//import {Toast} from 'vant';
//import {Notify} from 'vant'
import Vue from 'vue'




Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', '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>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})




export default {
  components: {

  },
  data() {
    return {
      
    };
  },
    mounted() {
   
  },
  methods: {
    onFocus(){
      console.log("focused......")
    },
    onInput(){
      console.log("input......")
    }

    
  },
};
</script>

<style >
  

</style>