vue子组件自定义事件,Vue自定义事件
本文主要介绍了如何通过vue自定义组件添加和使用原生事件，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
如何使用本机事件添加自定义组件。$emit()通过。本地属性vue使用本地事件
自定义组件如何添加使用原生事件
定制组件是vue的重要知识块之一。很多人在使用的时候会发现一个问题：为什么我在组件中绑定了click事件就不行了？这里先来看看原因。
直接在自定义组件中绑定原生事件vue是‘不可取’的，它会认为你没有定义这个事件，所以没有反应。
哪些是原生事件？
例如，click click、mouseover鼠标移入、mouseout鼠标移出、keyup键盘按下、keydown键盘按下等等。官方提供的一系列事件都是原生事件。那么咋办？
. $emit()传递
身体
div id=应用程序
Jsxj:Jsxj= message @ click= Jsxj change /Jsxj
/div
/body
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
信息：“你好，世界”
},
组件：{
Jsxj:{
道具：[jsxj]，
模板：` p @click=pChange{{jsxj}}/p `，
方法：{
pChange(){
这个。$emit(click )
}
},
}
},
方法：{
JsxjChange(){
this.message=你好，Jsxj
}
},
})
/脚本
第一种方法是通过$emit()传递事件。比如我们在自定义组件Jsxj中设置一个模板，在模板中的p个原生元素上触发原生click事件，调用函数pChange()，函数用$emit()发送自定义事件click up。父组件Jsxj接收该事件，因此它可以正常触发点击。
. native属性
身体
div id=应用程序
Jsxj:Jsxj= message @ click . native= Jsxj change /Jsxj
/div
/body
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
信息：“你好，世界”
},
组件：{
Jsxj:{
道具：[jsxj]，
模板：` p{{jsxj}}/p
}
},
方法：{
JsxjChange(){
this.message=你好，Jsxj
}
},
})
/脚本
第二种方法相对简单。
代码是类似的，但是我们不再使用$emit()将自定义事件从孩子传递给父母，这太麻烦了。而是使用native属性来帮助@click.native=JsxjChange ，这样组件就会知道这是原生事件click，并调用相应的函数。
vue使用原生事件
项目中使用了ui框架Element ui。有些组件没有封装的事件，如点击事件。我用的时候感觉不太好使。后来查了vue官方文档，发现有些原生事件是不提供的，我们的自定义组件也不能直接使用click事件，需要写。本机点击事件后生效。
即 例如：
El-card @ click . native= enter /El-card
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。