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 16 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue el-table实现递归嵌套的示例代码
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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
一个典型的PHP分页实例代码分享
2011/07/28 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
jQuery使用方法
2017/02/04 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
Django Admin实现上传图片校验功能
2016/03/06 Python
详解python进行mp3格式判断
2016/12/23 Python
django2 快速安装指南分享
2018/01/05 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
上课迟到检讨书范文
2015/05/06 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
Nginx进程管理和重载原理详解
2021/04/22 Servers