我一开始是这样绑定事件的,但是没有效果:

        <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>

解释:

 .prevent相当于加了一句event.preventDefault() ;

vux组件绑定事件的更多相关文章

  1. vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...

  2. Vue--vue中的组件、组件绑定事件和数据、私有组件、子组件,父子组件参数互传

    一.公有组件以及组件的使用和特点 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. vue组件的hover事件模拟、给第三方组件绑定事件不生效问题

    1.vue里面实现hover效果基本需要用事件模拟 <div @mouseover="overShow" @mouseout="outHide"> ...

  4. vuejs给组件绑定原生事件

    给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...

  5. vue组件添加事件@click.native

    1,给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件 2,等同于在子组件中:  子组件内部处理click事件然后向外发送click事件:$emit(&q ...

  6. Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...

  7. Vue组件绑定自定义事件

    Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...

  8. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

  9. Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)

    文章目录 1.基础知识 2.代码实例 2.1 App.vue 2.2 school.vue 2.3 student.vue 3.测试效果(略) 4.实际应用(在组件化编码实战三的基础上改进) 4.1 ...

随机推荐

  1. Java NIO使用及原理分析(三)(转)

    在上一篇文章中介绍了缓冲区内部对于状态变化的跟踪机制,而对于NIO中缓冲区来说,还有很多的内容值的学习,如缓冲区的分片与数据共享,只读缓冲区等.在本文中我们来看一下缓冲区一些更细节的内容. 缓冲区的分 ...

  2. OC基础--常用类的初步介绍与简单使用之NSDate

    一.创建一个时间 NSDate *date = [NSDate date]; // 打印出的时间是0时区的时间(北京--东八区) NSLog(@"%@",date); 二.日期格式 ...

  3. Entity Framework应用:使用Code First模式管理存储过程

    在EF中使用存储过程和使用视图是很相似的,一般会使用Database对象上的两个方法:SqlQuery和ExecuteSqlCommand.为了从存储过程中读取很多数据行,我们只需要定义一个类,我们会 ...

  4. HTTP API 设计指南(请求部分)

    为了保证持续和及时的更新,强烈推荐在我的Github上关注该项目,欢迎各位star/fork或者帮助翻译 前言 这篇指南介绍描述了 HTTP+JSON API 的一种设计模式,最初摘录整理自 Hero ...

  5. 02 Architecture Overview

    本章提要---------------------------------------------arthiecture, and some componentconnect to oracle这一章 ...

  6. android 编译 app

    有些编写的app需要放到android的源码中进行编译.放置的路径packages/apps/ 编译方法,参考 http://blog.csdn.net/luoshengyang/article/de ...

  7. e553. 作为浏览器访问URL

    // See also e551 精简的Applet try { URL url = new URL(getDocumentBase(), "http://hostname.com/page ...

  8. Configurations of Vim/GVim of dsp

    Linux环境写到用户主目录下的.vimrc文件(没有则新建),Windows环境则为GVim安装目录下的_vimrc(没有则新建),内容如下: "分上下两屏 "sp " ...

  9. DB2多行转一行【XML方式】

    分组然后合并,然后去除XML标签 SELECT replace(replace(replace(xml2clob(xmlagg(xmlelement(name A, [字段]))),'</A&g ...

  10. php 错误和异常处理

    一.错误和异常处理 1.1 错误类型和基本的调试方法 PHP程序的错误发生一般归属于下列三个领域: 语法错误: 语法错误最常见,并且也容易修复.如:代码中遗漏一个分号.这类错误会阻止脚本的执行. 运行 ...