咨询电话:
15628812133
07
2023/04

Vue自定义组件中$emit的用法

发布时间:2023-04-07 18:22:45
发布者:MaiMai
浏览量:
0

上一篇我们说到,props是组件的自定义属性,组件的使用者可以通过props把数据传递到子组件内部,那么如果要将子组件的值传递到组件外呢?

 

我们可以使用this.$emit函数实现。

 

对于$emit的用法可以总结为以下两点:

1. 子组件通过$emit的方式,调用父组件中的事件

2. $emit函数只能在子组件中使用

 

我们来看个例子。

image.png

 

如图,我们先在自定义组件中,将按钮的点击事件定义为myclick事件进行传递,使用此组件后可以直接用myclick事件名来监听。这样,我们便可以调用父组件的事件,并执行appfunc函数。

 

此外,$emit方法在传递事件的时候也可以传递参数。

 

image.png

 

 

这里的逻辑是,当子组件被点击时,触发myclick事件,之后执行$emit函数,会调用父组件中的appfunc方法,同时将title的值作为参数传过去,页面上打印出传递的title值。

1680863241300.png

关键词:
返回列表