vue 自定义组件绑定的点击事件不生效

最新推荐文章于 2022-10-12 11:44:12 发布
最新推荐文章于 2022-10-12 11:44:12 发布
阅读量501 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58689048/article/details/119600708
版权
在Vue中遇到自定义组件的点击事件不起作用的问题，原因是默认的事件绑定可能不会传递到子组件。解决方法是在绑定事件时添加.native修饰符，如@click.native='setFn'，这样可以确保事件在子组件上正确触发。
摘要由CSDN通过智能技术生成

问题原因

  • vue 在自定义组件上绑定点击事件不生效
<Icon type="app-shezhi" @click="setFn"/>;

解决方法

  • 最简单的做法，添加 .native修饰
<Icon type="app-shezhi" @click.native="setFn"/>;
前端路上的阿C
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈vue中组件绑定事件时是否加.native
10-16
2. 自定义组件绑定事件 然而，当我们在自定义组件上绑定事件时，情况就有所不同。自定义组件可能有自己的事件系统，它们通过`$emit`来触发自定义事件。例如，一个名为`<mt-field>`的自定义组件可能会有`@input`事件...
解决Vue router-link绑定事件不生效的问题
12-28
1： 因为它是自定义标签，根本就没有事件和方法，所以不触发，加个native 就是告诉vue 这个标签现在有主了 它是H5标签 可以加事件了。 2：父组件要想在子组件监听自己的click事件就得加native，router-link是标签啊...
vue自定义组件的点击事件失效
xi1213的博客
03-03 846
在vue开发过程中为了减少重复代码，很多时候都需要将重复的部分写成一个组件，方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写，事件则会失效： 正确写法应该是这样： ...
vue click点击事件不生效
SSS01233210的博客
03-03 1888
click点击事件不生效 Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件， 子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符; 即：@click.native="xxx()" ...
vue自定义组件click点击事件无效处理办法
sinat_29243257的博客
07-09 4247
在Vue项目中，通常需要用到封装组件，但是在给组件添加click事件时却发现无法执行，以下是常用的两种解决方案： 1、最简单的做法，添加 .native修饰，对于组件要求不高的情况下，使用此方法最为直接方便； 2、如果要求比较高，那么就试试添加 listeners： 首先给自定义组件绑定监听事件 <div class="xtItemContainer" v-on="clickListeners">自定义组件内容</div> 在自定义组件内添加 computed: { clickL
为自定义控件添加页面响应事件
weixin_30245867的博客
07-30 105
ascx:<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />ascx.cs:(1)public delegate void PostBackDelegate(); //定义委托类型public event PostBackDelegate PostBackEvent; //...
vue组件绑定事件无效问题的解决方案
qq_44318215的博客
09-07 696
在开发的时候遇到了一个问题，给router-link标签添加点击事件后，却不触发该事件，经查阅资料后，解决办法如下： 对于vue自定义的标签如< router-link >以及组件< my-component >都是会阻止事件触发的，若想要绑定事件，则需要使用native修饰符，如@click.native 将事件转化为原生事件。 ...
VUE解决 v-html不能触发点击事件的问题
10-16
通过创建自定义组件并使用Vue的组件系统，我们可以确保动态生成的HTML内容中的事件监听器能够正常工作。这种方法不仅解决了点击事件的问题，还提高了代码的可维护性和安全性，因为Vue会对组件中的所有内容进行编译和...
vue 自定义函数库总结
04-22
此外，Vue还支持创建自定义组件。组件是Vue的核心特性之一，它允许我们将UI拆分成可重用的部分。创建一个名为`MyComponent.vue`的单文件组件： ```html <!-- MyComponent.vue --> <h3>{{ title }} <p>{{ ...
vue element-ui 绑定@keyup事件无效的解决方法
08-27
然而，Element-UI组件可能在其内部已经实现了自己的键盘事件处理，从而覆盖了用户的自定义事件绑定。 在Element-UI的`el-input`组件中，当用户输入时，它会有一些内置的行为，例如自动补全、过滤等。这些行为可能与...
Vue 自定义组件添加点击(@click)事件
卡尔特斯
03-31 8096
在 Vue 开发中自定义组件之后，需要往组件身上添加 click 之类的一些操作事件，但是加上之后会无效。 原因是因为没有加上 native,官网对于 native 的解释为: .native - 监听组件根元素的原生事件。 因此正确的写法是： // 无效写法 <custom @click="touchCustom"></custom> // 正确写法 <custom @click.native="touchCustom"></custom> ..
Vue中关于自定义组件定义@click事件不生效的解决办法
Mxt623的博客
10-12 2252
比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加。就是在子组件中添加this.$emit ( “事件名” ，value )方法 将子组件的值传到父组件再进行处理。当你给一个vue组件或者是自定义组件绑定事件的时候，要加上native，如果是普通的html元素，就不需要。还有另外一种解决方式。
VUE07
cxuyuanLch的博客
05-28 127
1.Vue给组件绑定自定义事件无效怎么做解决？ 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符： <label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > </label> 这时，父级的 .nati
Vue子组件向父组件使用自定义事件$emit传递数据无效的坑
coderYYY的博客
04-01 6958
子级向父级传递—自定义事件 当子组件需要向父组件传递数据时，用到的是自定义事件 自定义事件的流程： 在子组件中，通过$emit()来触发事件。 在父组件中，通过v-on来监听子组件事件。 我们来看一个简单的例子： 我们之前做过一个两个按钮+1和-1，点击后修改counter。 我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件。 这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total。 <!--父组件模板--> <div i
[css] 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行
歌谣的博客
01-16 3308
[css] 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行 .item-codes{width:800px;word-break: break-all;white-space: normal;} 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
Vue里自定义事件触发不了事件@Aclick，关于自定义事件的规范
ShiXinXin_Harbour的博客
10-20 884
特别注意事项，经我一个半小时的验证才发现 @Aclick 这样的自定义事件大写开头的永远是无效的，起码现在的Vue还不支持 @aclick 这样自定义事件以小写开头的才是语法允许的，大写开头是不可以的 ...
VUE自定义组件click事件不生效
小太阳的博客
09-26 1027
<gw-legend class="u-legend" @click="changeLengend" /> changeLengend() { console.log('点击事件'); }, 发现控制台并不输入console的内容。 原因是因为没有加上 native,官网对于 native 的解释为: 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符 <base-input v-o..
vue解决自定义组件不能使用事件的问题
qq_41505416的博客
09-12 1175
自定义组件以全局组件为例 vue.component("自定义组件名“，template) Vue.component("my-button", template:"<div>我是自定义组件</div>") 这样在任何一个.vue文件中都可以使用, 如果要显示template里面的内容请使用slot 但是自定义的组件目前是不能直接使用点击事件，如：<my-button @click=“clickBtn”>,这样虽然点击事件不会报错，但也不会有任何反应，为了解决自定义组件
vue子组件绑定事件失效问题
一止弋的博客
09-05 6588
vue中子组件绑定事件失效问题 最近在学习vue的过程中，深刻领会到组件机制的便利，但也遇到了一些麻烦的问题。 vue中在父组件中引入一个子组件，想要直接在父组件中给子组件或者包含子组件的dom元素设置是行不通的。 正确的方法是：先在子组件中监听相关事件，监听到后，将监听到的事件连带相关的参数一同返回到父组件中处理。 子组件中监听事件 &amp;lt;div class=&quot;con&quot; @cli...
vue 点击事件不生效
最新发布
07-28
Vue点击事件不生效的原因可能有几种。首先，可能是因为在引入better-scroll时没有添加配置项click: true，导致子组件的点击事件失效。\[1\]其次，如果在自定义组件上绑定@click，Vue会认为这是组件内部的事件，而组件本身并没有对这个@click做相应的处理，所以没有反应。可以尝试使用@click.native来绑定原生的点击事件。\[2\]另外，如果事件绑定在父元素上，但实际点击的是子元素，可以尝试将@click事件绑定到子元素上，并使用.stop修饰符来阻止事件冒泡。\[3\]请检查以上几种情况，看是否能解决你的问题。 #### 引用[.reference_title] - *1* *3* [Vue点击事件失效](https://blog.csdn.net/m0_56800567/article/details/126961324)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue点击事件失效](https://blog.csdn.net/maowencai/article/details/126384159)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值