vue自定义组件如何添加使用原生事件
更新时间：2022年04月21日 11:23:33 作者：Jsxj不想奋斗
这篇文章主要介绍了vue自定义组件如何添加使用原生事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
自定义组件如何添加使用原生事件
自定义组件(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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue3中封装axios请求的最新实现步骤,在Vue 3中可以通过封装axios来实现接口的统一管理和调用,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要为大家详细介绍了vue-quill-editor富文本编辑器简单使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
本篇文章主要介绍了vue-Resource（与后端数据交互），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要为大家详细介绍了Vue3中useLocalStorage用法的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下2023-10-10
这篇文章主要介绍在Vue中是如何封装axios的相关资料，axios的封装主要是帮助我们简化代码和利于后期的更新维护，感兴趣的小伙伴可以和小编一起来阅读下面文章的具体内容2021-10-10
这篇文章主要给大家介绍了关于vue实现防抖的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
如何利用vue+vue-router+elementUI实现简易通讯录
这篇文章主要介绍了如何利用vue+vue-router+elementUI实现简易通讯录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
解决Vite无法分析出动态import的类型,控制台出警告的问题
这篇文章主要介绍了解决Vite无法分析出动态import的类型,控制台出警告的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue 地区选择器v-distpicker的常用功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue组件之间相互传值的方式，对vue感兴趣的同学，可以参考下2021-05-05
最新评论