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>
###对于楼主的问题,我觉得很有意思,特意百度学习了一下。
有一篇类似的文章特意讲了《使用.native和$listeners将控件的原生事件绑定到组件》
https://www.cnblogs.com/vicky...
使用.native有一个缺陷就是子组件根元素实际上是一个 `<label>` 元素时,原生事件不能被绑定到input事件上
所以楼主的问题的解决办法是将
v-on:focus.native="onFocus"
中的native
去掉。
你的这个input是vue组件,最外层是lable标签,普通元素要设置tabIndex才能获取焦点,触发焦focus事件。
###你把你代码里的.native
去了呀。。