千家信息网

vue怎么给自定义的组件绑定点击事件

发表于:2025-01-18 作者:千家信息网编辑
千家信息网最后更新 2025年01月18日,这篇文章主要介绍"vue怎么给自定义的组件绑定点击事件",在日常操作中,相信很多人在vue怎么给自定义的组件绑定点击事件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"v
千家信息网最后更新 2025年01月18日vue怎么给自定义的组件绑定点击事件

这篇文章主要介绍"vue怎么给自定义的组件绑定点击事件",在日常操作中,相信很多人在vue怎么给自定义的组件绑定点击事件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"vue怎么给自定义的组件绑定点击事件"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

给自定义的组件绑定点击事件

在做项目中我们往往会封装许多的组件,来减少代码的重复性,提高代码的可利用性,有时候也会给组件绑定事件,但是经常会失效。

先给cardinfo这个组件绑定一个点击事件

     

一般都是这样给点击事件,可是有时候这个事件是没用的,因为这个事件是引用组件页面的事件,而不是组件本身的事件,所以组件内不能识别这个事件的来源。

     

在@click后面加native表示的是当前页面的事件

  

给自定义组件添加单击事件

自己定义了一个按钮按组件

在其他的页面引用这个组件

引入

import EndButton from '@/components/EndButton.vue';export default {  name: 'UiEndyuyuetransfer',   components:{     PageTop,      YuyueDetailItem,      EndButton,   },   methods:{   toEndYuyueTransferResult(){   this.$router.push({name:"EndYuyueTransferResult"})   }   }}

在页面中

点击按钮你会发现,方法没有被触发。

给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件。

到此,关于"vue怎么给自定义的组件绑定点击事件"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

0