Vue 自定义组件添加点击(@click)事件

最新推荐文章于 2024-05-25 16:04:51 发布
最新推荐文章于 2024-05-25 16:04:51 发布
阅读量8k 收藏 6
点赞数 2
分类专栏： Vue2.x 文章标签： Vue click.native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz00008888/article/details/115357280
版权

  • 在 Vue 开发中自定义组件之后，需要往组件身上添加 click 之类的一些操作事件，但是加上之后会无效。

  • 原因是因为没有加上 native,官网对于 native 的解释为:

    .native - 监听组件根元素的原生事件。

  • 因此正确的写法是：

    // 无效写法
<custom @click="touchCustom"></custom>

// 正确写法
<custom @click.native="touchCustom"></custom>
卡尔特斯
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue的自定义组件不能使用click方法的解决
10-15
总结来说，Vue自定义组件中点击事件的处理需要注意使用`.native`修饰符，以便正确监听和处理根元素的原生事件。同时，利用`<component>`元素和`:is`属性可以方便地实现在视图中动态切换组件，为复杂应用提供灵活的...
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
11-20
在本例中，标题为“解决VUE自定义拖拽指令时onmouseup与click事件冲突问题”，描述中指出，功能是一个支持上下拖动的悬浮菜单按钮，点击时可以展开或关闭菜单。当用户进行拖拽操作后，如果在松开鼠标时鼠标位置位于...
Vue组件的自定义事件
m0_37546766的博客
02-28 1902
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）上面给Student组件绑定了xuexi事件，那么就需要在Student组件里去提供触发该事件的。自定义事件：一种组件间通信的方式，适用于：子组件 → 父组件。在组件标签中定义ref，使用$refs来绑定事件。@xxx或者v-on:xxx来绑定事件。这种方式会更灵活，可以增加业务逻辑的处理。当组件被销毁时，绑定的事件也自然是失效的。学生组件同案例一，只需修改APP组件。案例一：@或v-on方式。
Vue3标签组件绘制--自定义按钮组件
最新发布
qq_52368602的博客
05-25 1575
这是type的设定，然后还有一个就是plain的设定，plain情况下的话，默认底色为白，框和字有色。看了一会儿感觉和普通的组件封装好像是差不多的原理，和平常使用的整体组件是一个道理，可能自定义上之前没有那么强。按照之前的技术能力应该也是没有问题的，这是我看的up主的内容。1.el-button中有个type属性，通过type的切换实现效果，而其中的color和round都是基本样式，我该如何实现同样的效果呢。由此可以看到基本所有的改变都是根据type来的，只要可以得到type，就可以简化封装~
Vue自定义的组件上@click点击事件【失效】问题
柠檬不萌只是酸i
08-21 1万+
代码如下： /*写的right_fixed组件*/ Vue.component('right_fixed',{ props:['message','top'], template:` <div class="intetral_details_btn"> {{message}} </div> ` }) /* ri...
Vue自定义组件父组件实现@click点击事件绑定的方法（实现计数器）
weixin_46816740的博客
09-11 3326
自定义组件的实现中，是实现一个计数器编程，原本是绑定在子元素上的@click事件，尝试绑定在自定义组件的父元素上进行实现。 原来的子元素绑定实现计数器代码如下： <body> <div id="app"> <briup-info>{{count}}</briup-info> </div> </body> Vue.component("briup-info",{ template:`
Vue中关于自定义组件定义@click事件不生效的解决办法
Mxt623的博客
10-12 2249
比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加。就是在子组件中添加this.$emit ( “事件名” ，value )方法 将子组件的值传到父组件再进行处理。当你给一个vue组件或者是自定义组件绑定事件的时候，要加上native，如果是普通的html元素，就不需要。还有另外一种解决方式。
vue自定义组件click点击事件无效处理办法
sinat_29243257的博客
07-09 4235
在Vue项目中，通常需要用到封装组件，但是在给组件添加click事件时却发现无法执行，以下是常用的两种解决方案： 1、最简单的做法，添加 .native修饰，对于组件要求不高的情况下，使用此方法最为直接方便； 2、如果要求比较高，那么就试试添加 listeners： 首先给自定义组件绑定监听事件 <div class="xtItemContainer" v-on="clickListeners">自定义组件内容</div> 在自定义组件内添加 computed: { clickL
mvc框架 如何加载使用 vue自定义组件，附@click.native 原理
会点php的前端小渣渣
09-18 1126
这里的MVC 包括了 java、php 这种前后不分离的框架，如果是 用脚手架的就不需要看了。。。 我这里是老项目使用了 ci框架，直接贴代码： 原理：使用mvc自带的加载html模板机制： <?php$this->load->view('registered/test');?> 组件： <?php defined('BASEPATH') OR exit('No direct script access allowed'); ?> <!DOCTY...
vue自定义组件添加使用原生事件
sxjit的博客
02-12 2305
自定义组件(Components)是vue的重要知识块之一，使用中不少人会发现一个问题：为什么我在组件里绑定click事件不起作用？这里先看看原因吧。 在自定义组件中直接绑定原生事件vue可是"不待见"的，它会认为你没有定义这个事件，所以没有任何反应。哪些是原生事件？例如click单击、mouseover鼠标移入、mouseout鼠标移出、keyup键盘按下抬起、keydown键盘按下…等等一系列...
vue 自定义组件@click无效
沐水莲心的博客
10-05 1602
vue 自定义组件@click无效 <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.4/vue.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.j
vue自定义组件@click点击失效问题，附解决方案
c1518589418的博客
12-03 1万+
问题描述： 自定义组件在使无法，无法绑定原vue文件内的原生click事件 原因分析： 根据查询vue官方文档，得知click事件作用于组件内部，如果组件内没有写click事件，便会无响应。 问题解决： 1.参照官方文档，可以用@click.native=“click”解决 2.可以用：将事件传递至组件内，也符合组件间的单向数据流，我就是这样解决的 主组件写法： 被调...
vue组件添加事件@click.native操作
01-21
1，给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn) <Item xss=removed></Item>...
Vue组件之自定义事件的功能图解
08-28
Vue组件之自定义事件的功能图解 Vue组件自定义事件是指在Vue应用程序中，组件之间可以通过自定义事件来实现通信和交互的功能。在本文中，我们将通过图文并茂的形式来介绍Vue组件之自定义事件的功能和使用方法。 一...
Vue.js组件通信之自定义事件详解
10-16
如果希望监听组件的根元素上的原生事件，可以在`v-on`后面加上`.native`修饰符，如`v-on:click.native="handleClick"`，这样`handleClick`就会在组件的根元素被点击时执行。 Vue 2.x引入了`v-model`指令，使得在...
解决 This is probably not a problem with npm. There is likely additional logging output above.
热门推荐
卡尔特斯
01-14 15万+
在执行 npm run serve 运行项目的时候报错: dengzemiaodeMacBook-Pro:lianshan_vue dengzemiao$ npm run serve ...... npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! lianshan@2.0.0 serve: `vue-cli-service serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ..
HTML5 流星+星空背景网页端【年会/婚礼】抽奖源码，打开导入名单即可使用，效果酷炫，调色即可温馨！
卡尔特斯
05-19 5万+
Github 下载地址：DZMLuckyDraw。网盘下载：DZMLuckyDraw。下载项目后，通过浏览器打开 主入口，然后导入名单即可使用，也可以自定义奖项名称，内定中奖人员，不用担心误关窗口。 自定义奖项设置人员名单配置，内定配置规则可导出中奖名单（如果不小心误关抽奖窗口、刷新网页都不会导致丢失用户名单、中奖名单、剩余未中奖用户名单、奖项配置等，所以误操作也没事，可以重新在同一个浏览器中打开，再次进入抽奖页，继续操作即可，流程保持不变）。这里有一个优化版本，是由 shatinGitHub 进行优
Browserslist: caniuse-lite is outdated. Please run: npx ....
卡尔特斯
04-12 5万+
今天打包 Vue 项目，突然蹦出一个告警： Browserslist: caniuse-lite is outdated. Please run: $ npx browserslist@latest --update-db 或者 $ npm update 按照提示操作，运行上面 npx browserslist@latest --update-db 能解决问题。 但是有的版本会报错提示运行 npm update，但是运行 npm update 不能解决问题。 于是查询了一下 npm 手册..
vue自定义组件添加点击事件
05-27
要为 Vue 自定义组件添加点击事件，可以使用 v-on 指令，它是 Vue 提供的一个事件绑定指令。具体实现步骤如下： 1.在自定义组件的模板中添加一个事件绑定指令，例如： ``` <template> <div class="my-component" v-on:click="handleClick"> 我是自定义组件 </div> </template> ``` 上面的代码中，我们在自定义组件的根元素上添加了一个 click 事件绑定指令，并将它绑定到组件内的 handleClick 方法上。 2.在组件的 script 标签中声明 handleClick 方法，例如： ``` <script> export default { // ... methods: { handleClick() { // 处理点击事件 } } } </script> ``` 上面的代码中，我们在组件的 methods 选项中声明了 handleClick 方法，并在方法中处理点击事件的逻辑。 这样，当用户点击自定义组件时，Vue 就会自动调用 handleClick 方法，并执行其中的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡尔特斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值