我要评论vm.$listener 包含了父组件中（除了 .native 修饰器以外的）事件监听器。
.native 修饰器是将组件看成一个普通的 HTML 标签，并且在父组件处给子组件绑定一个原生事件。
当内部组件不具备外部绑定的一些 DOM 事件，而外部组件具备相应的 DOM 事件时，在内部组件可以通过 v-on="listener" 将外部组件绑定的事件和事件函数传入内部组件。
示例如下：
// 父组件作用域中
// js
import TodoTextInput from '@/components/TodoTextInput.vue'
// html
<TodoTextInput
v-model="newTodoText"
@keydown.enter="addTodos">
</TodoTextInput>
// 上下两种组件都能实现有效的外部绑定事件
<TodoInputNative
v-model="newTodoText"
@keydown.enter.native="addTodos">
</TodoInputNative>
// TodoTextInput 子组件作用域中 ------ this.$listeners 传入绑定事件
// html
<div>
<input v-on="listeners" />
// 添加一个 input 做对比
<input @input="putTodoText" />
</div>
// js
computed: {
listeners() {
console.log(this.$listeners); // 控制台打印出来就可以很清楚的看到
return {
...this.$listeners,
input: event => this.$emit('input', event.target.value) // 子组件自身绑定的 input 事件监听器
}
}
},
methods: {
putTodoText(e) {
this.$emit('input', e.target.value) // 第二个 input 能够提交 value 但是没有办法 addTodos
}
}
// TodoInputNative 子组件作用域中 ------ 普通组件外部通过 .native 绑定事件
// html
<div>
<input @input="putInput" />
</div>
// js
methods: {
putInput(e) {
this.$emit('input', e.target.value)
}
}
我们在父组件给 TodoTextInput 绑定了回车键按下的事件监听器，通过 this.$listener 将父组件绑定的事件和事件函数绑定到子组件上。如果使用 TodoTextInput 第二种 input 的话，我们无法触发父组件绑定的这个 回车键按下的 事件。
同样也可以使用 .native 修饰符把组件看成是一个普通的 html 标签，在父组件给其绑定原声事件，也能实现内部组件监听外部组件绑定的事件的效果。
本文地址：https://blog.csdn.net/Kofe_Chen/article/details/107384393
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论