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 ...
随机推荐
- Android-——多线程之Handler(转)
Android--多线程之Handler 原文地址:http://www.cnblogs.com/shirley-1019/p/3557800.html 前言 Android的消息传递机制是另外一种形 ...
- 怎样统计分析CSDN博客流量
第一.IP.PV和UV各自是什么意思? IP.实际上也就是指独立IP,它的英文为Internet ***otocol,是独立IP数的意思.00:00-24:00同样IP地址记录一次.即使你有多台电脑. ...
- pip使用国内镜像,豆瓣、清华
pip使用国内镜像,豆瓣.清华 2017年01月18日 22:27:44 阅读数:4416 Python开发的时候需要安装各种模块,而pip是很强大的模块安装工具,但是由于国外官方pypi经常被墙,导 ...
- iOS边练边学--(Quartz2D)基本图形的绘制#附加自定义进度控件的练习
一.Quartz2D使用须知 Quartz2D的API是纯C语言的 Quartz2D的API来自于Core Graphics框架 二.<1>通过原始的方法(C语言)绘制简单图形--了解 & ...
- 2016年第七届蓝桥杯C/C++程序设计本科B组省赛
/* 2016年第七届蓝桥杯C/C++程序设计本科B组省赛 煤球数目(结果填空) 煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形) ...
- jar/war/ear文件的区别
jar/war/ear三种文件,在文件结构上,三者并没有什么不同,它们都采用zip或jar档案文件压缩格式.但是它们的使用目的有所区别: Jar文件(扩展名为. Jar)包含Java类的普通库.资源 ...
- 公司内网成功实现WSUS在不连外网的条件下更新补丁包!
微软的WSUS的命令行很有帮助! 为了便于管理,WSUS服务器中提供了一个命令行工具WSUSUtil.exe,你可以使用它完成一些在WSUS管理控制台中不能进行的任务,例如导入导出数据等等.WSUSU ...
- js学习笔记10----字符串的基本操作
1.字符串的基本操作如下: 定义字符串: var str = "Hello World!" 字符串的基本操作如下: str.length-----返回字符串长度,这里返回12 st ...
- thinkphp 查询指定分类下的文章
$list = $Dao->query("SELECT xp_wztj.bt,xp_wztj.time,xp_wztj.gjz,xp_wztj.wz,xp_wzfl.name FROM ...
- 【转】@JoinColumn 详解
在address中没有特殊的注解. 在Person中对应到数据库里面就有一个指向Address的外键. 我们也可以增加注释指定外键的列的名字,如下:@OneToOne(cascade=CascadeT ...