vue 自定义组件添加原生事件


Posted in Vue.js onApril 21, 2022

自定义组件如何添加使用原生事件

自定义组件(Components)是vue的重要知识块之一,使用中不少人会发现一个问题:为什么我在组件里绑定click事件不起作用?这里先看看原因吧。

在自定义组件中直接绑定原生事件vue可是"不待见"的,它会认为你没有定义这个事件,所以没有任何反应。

哪些是原生事件?

例如click单击、mouseover鼠标移入、mouseout鼠标移出、keyup键盘按下抬起、keydown键盘按下…等等一系列由官方提供的事件都是原生事件。那么咋办?

. $emit()传递

<body>
   <div id="app">
       <Jsxj :jsxj="message" @click="JsxjChange"></Jsxj>
   </div>
</body>
<script>
   var vm = new Vue({
       el:"#app",
       data:{
           message:"Hello World"
       },
       components:{
           Jsxj:{
               props:['jsxj'],
               template:`<p @click="pChange">{{jsxj}}</p>`,
               methods: {
                   pChange(){
                       this.$emit("click")
                   }
               },
           }
       },
       methods: {
           JsxjChange(){
               this.message="Hi, Jsxj"
           }
       },
   })
</script>

第一种方法是通过$emit()传递事件。如代码:我们在自定义组件Jsxj中设置模板,在模板中<p>原生元素上触发原生click事件,调用函数pChange(),函数用$emit()向上传递自定义事件click,父组件Jsxj接收到这个事件,于是便可以正常触发click。

. native属性

<body>
   <div id="app">
       <Jsxj :jsxj="message" @click.native="JsxjChange"></Jsxj>
   </div>
</body>
<script>
   var vm = new Vue({
       el:"#app",
       data:{
           message:"Hello World"
       },
       components:{
           Jsxj:{
               props:['jsxj'],
               template:`<p>{{jsxj}}</p>`  
           }
       },
       methods: {
           JsxjChange(){
               this.message="Hi, Jsxj"
           }
       },
   })
</script>

第二种方法相对简单。

代码大同小异,不过我们不再用$emit()从子向父传递自定义事件,太麻烦了,而是用native属性帮忙@click.native="JsxjChange",这样组件就会知道这是原生事件click,调用相应的函数。 

vue使用原生事件

在项目中用到element ui 这个ui框架,有些组件没有封装的事件,例如click事件 ,我在使用时感觉不起作用,后来查看vue官方文档,发现有些原生事件是不提供,还有我们自定义的组件也是不能直接使用click事件的 ,需要在click事件后写上.native才能生效

即 例如:

<el-card @click.native = "enter"></el-card>
Vue.js 相关文章推荐
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
解读Vue组件注册方式
May 15 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 #Vue.js
vue组件vue-esign实现电子签名
Apr 21 #Vue.js
vue动态绑定style样式
Apr 20 #Vue.js
Vue OpenLayer测距功能的实现
vue 给数组添加新对象并赋值
Apr 20 #Vue.js
vue 数字翻牌器动态加载数据
Apr 20 #Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 #Vue.js
You might like
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
常用的javascript设计模式
2017/01/11 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
在Django框架中设置语言偏好的教程
2015/07/27 Python
Tornado 多进程实现分析详解
2018/01/12 Python
python针对excel的操作技巧
2018/03/13 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
Python文件操作的面试题
2013/06/22 面试题
学生档案自我鉴定
2013/10/07 职场文书
函授大专自我鉴定
2013/11/01 职场文书
给校长的建议书300字
2014/05/16 职场文书
社区禁毒工作方案
2014/06/02 职场文书
主要领导对照检查材料
2014/08/26 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript