vue3子组件调用父组件

在Vue3中，子组件可以通过两种方式调用父组件的方法。
第一种方式是使用异步方式。在父组件中，定义一个供子组件调用的方法，比如xx。然后在子组件的setup函数中，使用context.emit方法调用父组件的方法。代码如下：
// 父组件
<my-childe ref="RefChilde" @update:xx="xx"></my-childe>

// 子组件
setup(props, context) {
function fnxx() {
context.emit('update:xx', [实参]);
}

// 其他代码

return {
fnxx
}
}
登录后复制
第二种方式是通过props方式。在父组件中，将要调用的方法作为一个props传递给子组件。然后在子组件的setup函数中，可以直接调用props中传递的方法。代码如下：
// 父组件
<my-childe ref="RefChilde" :xx="xx"></my-childe>

// 子组件
props: {
xx: {
type: Function,
required: true
}
},
setup(props) {
// 其他代码
const Fnxx = () => {
props.xx()
}
// 其他代码

return {
Fnxx
}
}
登录后复制
以上是Vue3中子组件调用父组件方法的两种常用方式。你可以根据具体的需求选择适合的方式来实现。123
引用[.reference_title]

1 2 3 [vue3] 子组件调用父组件的多种方法[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2allinsert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]