vue 子组件执行父组件事件
时间: 2023-08-31 08:10:06 浏览: 54
在Vue中,子组件可以通过自定义事件来触发父组件的事件。以下是一个简单的示例:
在父组件中,定义一个方法来处理子组件触发的事件:
```javascript
<template>
<div>
<ChildComponent @custom-event="handleEvent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleEvent() {
// 处理子组件触发的事件
console.log('子组件触发了自定义事件');
}
}
}
</script>
```
在子组件中,通过 `$emit` 方法触发自定义事件:
```javascript
<template>
<button @click="triggerEvent">触发事件</button>
</template>
<script>
export default {
methods: {
triggerEvent() {
// 触发自定义事件
this.$emit('custom-event');
}
}
}
</script>
```
当子组件的按钮被点击时,会触发 `triggerEvent` 方法,然后子组件通过 `$emit` 方法触发名为 `custom-event` 的自定义事件。父组件监听到该事件后,会调用 `handleEvent` 方法进行处理。
这样,就实现了子组件执行父组件的事件的功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)