VUE自定义事件--组件绑定原生事件

最新推荐文章于 2024-07-10 11:02:18 发布

aliven1

最新推荐文章于 2024-07-10 11:02:18 发布

阅读量404

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/aliven1/article/details/118436287

版权

vue 专栏收录该内容

154 篇文章 2 订阅

订阅专栏

本文介绍了在Vue中如何在组件根元素上监听原生事件，使用`.native`修饰符实现。同时展示了如何通过`$listeners`属性在组件内部监听非根元素的原生事件，并在父组件中像监听普通元素一样处理这些事件。这为组件间事件通信提供了一种灵活的方式。

摘要由CSDN通过智能技术生成

1. 在一个组件的根元素上直接监听一个原生事件。

你可以使用 v-on 的 .native 修饰符：

<base-input v-on:focus.native="onFocus"></base-input>

2. 监听的是非根原生，Vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器

//head_nav.vue组件中绑定计算属性
<template>
	<div class="head_nav boxs">
		<div class="main_ctn" v-on='mainListeners'>
			<div class="head_des" v-text="home_info.system_name">
				数据管理系统
			</div>
		</div>
	</div>
</template>

//计算属性中，写对应元素的监听器
computed:{
	mainListeners:function(){
		const vm=this;
		return Object.assign({},
		this.$Listeners,
		{
			click:function(event){
				vm.$emit('click',event)
			}
		})
	}
  }
  
//组件调用的时候，就可以像监听普通元素一样，监听原生事件
<head_nav @click="testSelfEvent('click',$event)"></head_nav>