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+vant实现购物车全选和反选功能
Nov 17 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
如何优化vue打包文件过大
Apr 13 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
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
使用js实现数据格式化
2014/12/03 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
js实现转动骰子模型
2019/10/24 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python中requests库session对象的妙用详解
2017/10/30 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Python使用re模块验证危险字符
2020/05/21 Python
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
Shell编程面试题
2012/05/30 面试题
构造方法和其他方法的区别
2016/04/26 面试题
项目资料员岗位职责
2013/12/10 职场文书
母婴店促销方案
2014/03/05 职场文书
中介业务员岗位职责
2014/04/09 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript
python基础之函数的定义和调用
2021/10/24 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers