vue3中子组件调用父组件方法

在Vue3中，子组件可以通过不同的方式调用父组件的方法。

一种方式是通过将父组件的方法作为props传递给子组件，在子组件中通过调用props中的方法来触发父组件的相应操作。比如，在父组件中定义一个方法xx，然后将它作为props传递给子组件：

<!-- 父组件 -->
<template>
  <my-child :xx="xx"></my-child>
</template>

<script>
export default {
  methods: {
    xx() {
      // 父组件的方法逻辑
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div @click="xx">点击调用父组件传过来的方法</div>
</template>

<script>
export default {
  props: ['xx']
}
</script>

另一种方式是通过使用emit方法在子组件中触发父组件的事件。子组件使用`context.emit('update:xx')`来触发父组件中名为`update:xx`的事件。父组件通过监听这个事件，然后执行相应的操作。示例如下：

<!-- 父组件 -->
<template>
  <my-child @update:xx="xx"></my-child>
</template>

<script>
export default {
  methods: {
    xx() {
      // 父组件的方法逻辑
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div @click="fnxx">点击调用父组件传过来的方法</div>
</template>

<script>
export default {
  setup(props, context) {
    function fnxx() {
      context.emit('update:xx');
    }
    return {
      fnxx
    }
  }
}
</script>

这两种方式都可以实现子组件调用父组件的方法，具体使用哪种方式取决于具体的需求和场景。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [[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: 50%"]
- *3* [vue3子组件调用父组件的方法](https://blog.csdn.net/weixin_43992935/article/details/127924287)[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: 50%"]
[ .reference_list ]