vue $listeners

Question

vue官方对$listeners的解释是

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners"传入内部组件

也就是说使用了.native修饰器的v-on事件不会传递给子组件

我按照官方代码来操作，无法触发focus事件??????

https://cn.vuejs.org/v2/guide...

但是他的例子里面是使用了.native修饰器的focus事件

<template>
  <div>
    <Input
      label="username"
      placeholder="Enter your username"
      v-model="form.username"
      v-on:focus.native="onFocus" />
  </div>
</template>

<script>
import Input from '@/components/Input'
export default {
  components: { Input },
  methods: {
    onFocus (e) {
      console.log(e)
    }
  }
}
</script>

<template>
  <label>
    {{ label }}
    <input type="text" v-bind="$attrs" v-on="inputListeners">
  </label>
</template>

<script>
export default {
  inheritAttrs: false,

  props: {
    label: String
  },

  computed: {
    inputListeners: function () {
      const vm = this
      return Object.assign(
        {},
        this.$listeners,
        {
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },

  created () {
    console.log(this.$listeners)
    /**
     * {
     *  input: ƒ
     * }
     */
  }
}
</script>

Answer 1

对于楼主的问题，我觉得很有意思，特意百度学习了一下。
有一篇类似的文章特意讲了《使用.native和$listeners将控件的原生事件绑定到组件》
https://www.cnblogs.com/vicky...

使用.native有一个缺陷就是子组件根元素实际上是一个 `<label>` 元素时，原生事件不能被绑定到input事件上

所以楼主的问题的解决办法是将

v-on:focus.native="onFocus"

中的native去掉。

Answer 2

你的这个input是vue组件，最外层是lable标签，普通元素要设置tabIndex才能获取焦点，触发焦focus事件。

Answer 3

你把你代码里的.native去了呀。。