欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

上一篇:

下一篇: