vux组件绑定事件
我一开始是这样绑定事件的,但是没有效果:
<box gap="15px 45px">
<x-button plain type="primary" style="border-radius:99px;border:none;background-color:#099eeb;color:#fff;" @click="fn">登录</x-button>
</box>
于是,通过仔细查看vux文档:

这里很明白的说明:需要用@click.native来绑定:
<box gap="15px 45px">
<x-button plain type="primary" style="border-radius:99px;border:none;background-color:#099eeb;color:#fff;" @click.native="fn">登录</x-button>
</box>
这样就有效果了。
拓展,还有一种写法@click.native.prevent:
<box gap="15px 45px">
<x-button plain type="primary" style="border-radius:99px;border:none;background-color:#099eeb;color:#fff;" @click.native.prevent="fn">登录</x-button>
</box>
解释:
vux组件绑定事件的更多相关文章
- vue中组件绑定事件时是否加.native
组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...
- Vue--vue中的组件、组件绑定事件和数据、私有组件、子组件,父子组件参数互传
一.公有组件以及组件的使用和特点 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- vue组件的hover事件模拟、给第三方组件绑定事件不生效问题
1.vue里面实现hover效果基本需要用事件模拟 <div @mouseover="overShow" @mouseout="outHide"> ...
- vuejs给组件绑定原生事件
给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...
- vue组件添加事件@click.native
1,给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件 2,等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit(&q ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
- Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
文章目录 1.基础知识 2.代码实例 2.1 App.vue 2.2 school.vue 2.3 student.vue 3.测试效果(略) 4.实际应用(在组件化编码实战三的基础上改进) 4.1 ...
随机推荐
- DevExpress gridcontrol学习知识点
.//允许自动合并单元格gv1.OptionsView.AllowCellMerge = true; 设置某列不合并 选中该列,在OptionsColumns-->AllowMerge中设置为f ...
- android EditText设置光标、边框和图标,以及限制输入
控制边框形状,先在drawable中建一个xml文件:shape.xml <?xml version="1.0" encoding="utf-8"?> ...
- JS下拉图片Demo3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- openfire url get提交 中文乱码问题
原因是它只接受url编码后的中文 如:%E7%BC%96%E7%A0%81%E5%90%8E%E7%9A%84%E4%B8%AD%E6%96%87 会自动转变为:http://127.0.0.1:90 ...
- Openfire配置过程,以及与php交互注意事项。
Ben Werdmuller 是一位 Web 策划师和开发人员,他专注于开放源码平台.他是开源社交网络框架 Elgg 的共同创始人和技术带头人.Ben 的博客 http://benwerd.com/. ...
- 关于在Android或Java中精度缺失的解决方法
left,right是两个String类型的字符串,myres是一个double类型的变量. 如果我们用下面的语句把left,right先转换为double后直接加法的话,如果作3.3乘3之类的运算( ...
- Omnigraffle快捷键
cmd+shift+. 和 cmd+shift+, 放大缩小 按住z点击鼠标是放大, z+Option是缩小 按住command双指推移 缩放 按住command,旋转物体 按住 option缩放 ...
- Spring零散所得
Spring容器中bean的id或name,都可以有多个,且第一个为标识符(Qualifier),其余皆为别名(Alias).所以都可以通过applicationContext.getBean(&qu ...
- numpy库中的知识点——积累
下面是一些杂碎的知识点: 首先我们说说多维数组: 数组的属性: ndarray.ndim, 表示数组的秩是多少: ndarray.shape,返回数组的形状: ndarray.size,数组元素的总个 ...
- e643. 以匿名类处理事件
If an event handler is specific to a component (that is, not shared by other components), there is n ...