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项目利用axios请求接口下载excel
Nov 17 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 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中mysql与mysqli的区别分析
2013/06/10 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
深入研究React中setState源码
2017/11/17 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
JSX在render函数中的应用详解
2019/09/04 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python里隐藏的“禅”
2014/06/16 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
python 如何引入协程和原理分析
2020/11/30 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
小加工厂管理制度
2014/01/21 职场文书
北体毕业生求职信
2014/02/28 职场文书
代理协议书范本
2014/04/22 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
节能标语大全
2014/06/21 职场文书
骨干教师考核评语
2014/12/31 职场文书
老公保证书怎么写
2015/02/26 职场文书
红色影片观后感
2015/06/18 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python