vue自定义组件click点击事件无效处理办法

最新推荐文章于 2024-08-16 07:34:20 发布

lee_c_m

最新推荐文章于 2024-08-16 07:34:20 发布

阅读量4.3k

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/sinat_29243257/article/details/118615733

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在Vue项目开发中，遇到组件click事件无法触发的问题，可以尝试以下解决方案：1) 使用`.native`修饰符，适用于简单场景；2) 对于复杂需求，可以通过计算属性`clickListeners`结合`$listeners`来实现，覆盖或添加自定义监听器。具体做法是在自定义组件内定义计算属性，将父组件的监听器与自定义的click事件合并，并在组件内部触发。

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

在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就可以了！