vue3 子组件调用父组件的方法并传参

vue3 子组件调用父组件的方法并传参在Vue3中，子组件调用父组件的方法并传参可以通过使用emit 事件来实现。

具体步骤如下：
1. 在父组件中定义一个方法，该方法接收一个参数，用于处理子组件传递过来的数据。

2. 在子组件中使用$emit方法触发一个自定义事件，并传递需要传递的参数。

3. 在父组件中通过在子组件上绑定自定义事件并传递一个回调函数来监听子组件发出的自定义事件。

4. 在回调函数中调用父组件中定义的方法，并将子组件传递过来的参数传递给该方法。

下面是一个实现示例：
父组件代码：
<template>
<div>
<h2>{{ message }}</h2>
<ChildComponent
@update-message='updateMessage'></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello World!'
}
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
}
</script>
子组件代码：
<template>
<div>
<button @click='changeMessage'>Change Message</button> </div>
</template>
<script>
export default {
methods: {
changeMessage() {
this.$emit('update-message', 'New Message');
}
}
}
</script>
在上面的代码中，父组件通过在子组件上绑定update-message 事件来监听子组件的自定义事件。

当子组件触发该事件时，父组件的updateMessage方法将被调用，并传递一个新的消息给该方法。

在updateMessage方法中，父组件的message属性将被更新，最终在页面中显示出新的消息。