vue3子组件怎么像父组件传递一个方法
时间: 2023-06-21 13:13:54 浏览: 43
在 Vue3 中,你可以通过使用 `emit` 函数将方法传递给子组件。假设要将名为 `parentMethod` 的方法传递给子组件,可以按照以下步骤操作:
1. 在父组件中定义 `parentMethod` 方法:
```js
export default {
methods: {
parentMethod() {
// do something
}
}
}
```
2. 在父组件中将 `parentMethod` 方法绑定到子组件的 `my-method` 事件上:
```html
<template>
<child-component @my-method="parentMethod" />
</template>
```
3. 在子组件中触发 `my-method` 事件:
```js
export default {
methods: {
childMethod() {
// do something
this.$emit('my-method')
}
}
}
```
现在,当子组件中调用 `childMethod` 方法时,父组件的 `parentMethod` 方法将被触发。可以将任何参数传递给 `$emit` 函数,这些参数将被传递给父组件的方法。例如:
```js
this.$emit('my-method', arg1, arg2)
```
在父组件中,可以通过以下方式来处理这些参数:
```js
<child-component @my-method="parentMethod($event, arg1, arg2)" />
```
其中 `$event` 是 `$emit` 函数中传递的事件对象,而 `arg1` 和 `arg2` 是自定义参数。