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中子组件调用父组件方法的两种常用方式。你可以根据具体的需求选择适合的方式来实现。<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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]