Vue $listener 和 .native 修饰符 示例详解

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