[vue3] 子组件调用父组件的多种方法
时间: 2023-10-31 21:21:25 浏览: 66
在 Vue 3 中,子组件可以通过多种方式调用父组件的方法。以下是一些常见的方法:
1. 使用 $emit:父组件可以通过自定义事件监听子组件触发的事件,并在父组件中定义对应的方法。子组件使用 `$emit` 方法触发自定义事件,并传递需要传递的参数。
父组件:
```html
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
export default {
methods: {
handleCustomEvent(data) {
// 处理子组件触发的事件
console.log(data);
}
}
}
</script>
```
子组件:
```html
<template>
<div>
<button @click="$emit('custom-event', 'Hello from child component')">触发事件</button>
</div>
</template>
```
2. 使用 provide/inject:父组件可以使用 `provide` 在自身上下文中提供方法,然后子组件可以使用 `inject` 来访问这些方法。
父组件:
```html
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import { provide } from 'vue';
export default {
setup() {
const handleMethod = () => {
// 父组件的方法
console.log('Method called from child component');
};
provide('handleMethod', handleMethod);
}
}
</script>
```
子组件:
```html
<template>
<div>
<button @click="handleMethod">调用父组件方法</button>
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const handleMethod = inject('handleMethod');
return {
handleMethod
};
}
}
</script>
```
这些是一些常用的方法,你可以根据具体的需求选择适合的方式来实现子组件调用父组件的方法。