今天小编给大家分享一下Vue自定义组件怎么添加使用原生事件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。自定义组件如何添加使
今天小编给大家分享一下Vue自定义组件怎么添加使用原生事件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
自定义组件(Components)是vue的重要知识块之一，使用中不少人会发现一个问题：为什么我在组件里绑定click事件不起作用？这里先看看原因吧。
在自定义组件中直接绑定原生事件vue可是"不待见"的，它会认为你没有定义这个事件，所以没有任何反应。
哪些是原生事件？
例如click单击、mouseover鼠标移入、mouseout鼠标移出、keyup键盘按下抬起、keydown键盘按下…等等一系列由官方提供的事件都是原生事件。那么咋办？
<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。
<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，调用相应的函数。
在项目中用到element ui 这个ui框架，有些组件没有封装的事件，例如click事件 ，我在使用时感觉不起作用，后来查看vue官方文档，发现有些原生事件是不提供，还有我们自定义的组件也是不能直接使用click事件的 ，需要在click事件后写上.native才能生效
即 例如：
<el-card @click.native = "enter"></el-card>以上就是“vue自定义组件怎么添加使用原生事件”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。
--结束END--
本文标题: vue自定义组件怎么添加使用原生事件
本文链接: https://www.lsjlt.com/news/327703.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
2024-04-28
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0