在Vue项目中,通常需要用到封装组件,但是在给组件添加click事件时却发现无法执行,以下是常用的两种解决方案:
1、最简单的做法,添加 .native
修饰,对于组件要求不高的情况下,使用此方法最为直接方便;
2、如果要求比较高,那么就试试添加 listeners:
首先给自定义组件绑定监听事件
<div class="xtItemContainer" v-on="clickListeners">自定义组件内容</div>
在自定义组件内添加
computed: { clickListeners: function () { let vm = this return Object.assign({}, // 我们从父级添加所有的监听器 this.$listeners, // 然后我们添加自定义监听器, // 或覆写一些监听器的行为 { // 这里确保组件配合 `v-model` 的工作 click: function (event) { console.log("监听事件"); vm.$emit('click', event.target) }, } ) }, }
现在再次在给此自定义组件绑定@click
就可以了!
vue自定义组件click点击事件无效处理办法
最新推荐文章于 2024-08-16 07:34:20 发布
在Vue项目开发中,遇到组件click事件无法触发的问题,可以尝试以下解决方案:1) 使用`.native`修饰符,适用于简单场景;2) 对于复杂需求,可以通过计算属性`clickListeners`结合`$listeners`来实现,覆盖或添加自定义监听器。具体做法是在自定义组件内定义计算属性,将父组件的监听器与自定义的click事件合并,并在组件内部触发。
摘要由CSDN通过智能技术生成