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实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
vue的for循环使用方法
2019/02/12 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
python递归实现快速排序
2018/08/18 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
keras topN显示,自编写代码案例
2020/07/03 Python
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
教师个人自我评价范文
2014/04/13 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
2014年财务科工作总结
2014/11/11 职场文书
业务员管理制度范本
2015/08/06 职场文书
2016特色励志班级口号
2015/12/24 职场文书
高中政治教学反思
2016/02/23 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python