emit事件 父组件如何调用
时间: 2023-05-28 09:07:58 浏览: 61
父组件可以通过在子组件上使用`ref`获取子组件实例,然后调用子组件实例的`$emit`方法触发子组件的`emit`事件,从而达到父子组件通信的目的。
示例代码如下:
```vue
<template>
<div>
<child ref="child"></child>
<button @click="handleClick">触发子组件的emit事件</button>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
methods: {
handleClick() {
this.$refs.child.$emit('eventName', arg1, arg2)
}
}
}
</script>
```
在子组件中,需要在`mounted`生命周期中监听`emit`事件。
示例代码如下:
```vue
<template>
<div>
子组件
</div>
</template>
<script>
export default {
mounted() {
this.$on('eventName', (arg1, arg2) => {
console.log('收到emit事件', arg1, arg2)
})
}
}
</script>
```
当父组件点击按钮触发`handleClick`方法时,会调用子组件实例的`$emit`方法触发`eventName`事件,并传递`arg1`和`arg2`参数。子组件通过`$on`方法监听`eventName`事件,接收到参数后执行相应的逻辑。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)