vue中使用v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素

//这是父组件
<template>
  <div class="homeView">
    <base-input v-on:focus="onFocus" v-model="baseInput.fullName" :label="label"></base-input>
  </div>
</template>

<script>
//引入组件
  import BaseInput from './BaseInput'

  export default {
    name: "HomeView",
    //注册组件
    components: {
      BaseInput
    },
    data() {
      return {
        baseInput: {
          firstName: 'base',
          lastName: 'Input',
          fullName: 'base Input'
        },
        label: ''
      }
    },
    created() {
      this.label = this.baseInput.firstName + this.baseInput.lastName;
    },
    methods: {
      onFocus: function() {
        console.log("verification the native whether effective.")
      }
    },
  }
</script>

<style scoped>
  .homeView {
    width: 80%;
    height: auto;
    margin: auto;
  }
</style>

//这是子组件
<template>
  <div>
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
        ></input>
      <input></input>
    </label>
    第二个input获得焦点时不会有任何效果，原因是v-on="inputListeners"未作用在这个这个元素上。
  </div>
</template>

<script>
  export default {
    name: "BaseInput",
    // 根元素不继承attribute，配合v-bind="$attrs"使用，指定被赋予attribute的元素上加此属性
    inheritAttrs: false,
    props: ['label', 'value'],
    data() {
      return {}
    },
    computed: {
      inputListeners: function () {
        var vm = this;
        // `Object.assign` 将所有的对象合并为一个新对象
        return Object.assign({},
          // 我们从父级添加所有的监听器
          this.$listeners,
          // 然后我们添加自定义监听器，
          // 或覆写一些监听器的行为
          {
            // 这里确保组件配合 `v-model` 的工作
            input: function (event) {
              vm.$emit('input', event.target.value)
            }
          }
        )
      }
    },
    methods: {}
  }
</script>

<style scoped>

</style>

有不对的地方还请指出！