vue3+ts点击子组件按钮调用父组件方法
时间: 2024-07-18 14:00:37 浏览: 114
在Vue 3中使用TypeScript,当子组件需要调用父组件的方法时,通常会通过`emit`事件来实现。这里是一个简单的例子:
1. **在子组件的模板中**,假设有一个按钮,你想点击后触发父组件的方法,可以这样写:
```html
<template>
<button @click="callParentMethod">点击我</button>
</template>
<script lang="ts">
import { Component, Prop, Emit } from 'vue';
@Component
export default class ChildComponent extends Vue {
@Emit('parent-event') callParentMethod() {
this.$emit('parent-event', /* 可选的参数 */);
}
}
</script>
```
2. **在父组件中**,你需要监听这个事件,并定义接收方法:
```html
<template>
<ChildComponent @parent-event="handleChildMethod"></ChildComponent>
</template>
<script lang="ts">
import { Component, Prop, methods } from 'vue';
import ChildComponent from './ChildComponent.vue';
@Component
export default class ParentComponent extends Vue {
// 定义处理子组件事件的方法
@methods
handleChildMethod(data: any) {
console.log('子组件调用了父组件的 method:', data);
// 在这里处理数据或执行其他操作
}
}
</script>
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)