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+iview分页组件的封装
Nov 17 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
Vue 打包后相对路径的引用问题
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/06/14 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
python数据结构之线性表的顺序存储结构
2018/09/28 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Python实现疫情地图可视化
2021/02/05 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
给护士表扬信
2014/01/19 职场文书
优秀小学生家长评语
2014/01/30 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
政协会议宣传标语
2014/10/09 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
新郎婚礼致辞
2015/07/27 职场文书
重阳节主题班会
2015/08/17 职场文书
小学语文教学反思范文
2016/03/03 职场文书
个人售房合同协议书
2016/03/21 职场文书