Vue $listener 和 .native 修饰符 示例详解
程序员文章站
2024-01-01 13:08:58
vm.$listener 包含了父组件中(除了 .native 修饰器以外的)事件监听器。当内部组件不具备外部绑定的一些 DOM 事件,而外部组件具备相应的 DOM 事件时,在内部组件可以通过 v-on="listener" 将外部组件绑定的事件和事件函数传入内部组件。示例如下:// 父组件作用域中// jsimport TodoTextInput from '@/components/TodoTextInput.vue'// html
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