vue3子组件如何使用父组件的方法

在Vue 3中，子组件可以通过不同的方式使用父组件的方法。

方法1：异步方式
在父组件中定义供子组件调用的方法，并使用`@update:xx`监听子组件的事件。在子组件中，使用`context.emit('update:xx')`来触发父组件的方法调用。
父组件组件：

<my-childe ref="RefChilde" @update:xx="xx(被子组件调用的自身方法)"></my-childe>

子组件组件：

setup(props, context) {
  function fnxx () {
    context.emit('update:xx', [实参]);
  }
  // 其他代码
}

方法2：props方式
在父组件中传递方法给子组件的props，并在子组件的setup函数中使用props调用父组件的方法。
父组件组件：

<my-childe ref="RefChilde" :xx="xx(被子组件调用的自身方法)"></my-childe>

子组件组件：

props: {
  xx: { type: Function, required: true }
},
setup(props) {
  function Fnxx() {
    props.xx();
  }
  // 其他代码
  return {
    Fnxx
  };
}

以上是Vue 3中子组件使用父组件方法的两种常见方式。根据需求和具体情况，可以选择适合的方式来实现子组件对父组件方法的调用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [[vue3] 子组件调用父组件的多种方法](https://blog.csdn.net/wyy7293/article/details/123918547)[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-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]