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 21 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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 中文处理函数集合
2008/08/27 PHP
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
vue实现侧边栏导航效果
2019/10/21 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
原生JavaScript实现随机点名表
2021/01/14 Javascript
python音频处理用到的操作的示例代码
2017/10/27 Python
python使用Tesseract库识别验证
2018/03/21 Python
pandas中去除指定字符的实例
2018/05/18 Python
Python Django路径配置实现过程解析
2020/11/05 Python
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
党支部书记岗位责任制
2014/02/11 职场文书
酒店节能降耗方案
2014/05/08 职场文书
应聘教师求职信范文
2015/03/20 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server