vue3子调用父方法

在Vue 3中，子组件可以通过两种方式调用父组件的方法。

方法1是使用异步方式调用父组件的方法。在父组件中定义供子组件调用的方法，例如`xx`方法。在子组件的`setup`函数中，使用`context.emit`方法调用父组件的方法，例如`context.emit('update:xx', [实参])`。注意，在父组件中需要使用`@update:xx`监听子组件的调用。父组件中的子组件标签应该是`<my-childe ref="RefChilde" @update:xx="xx[被子组件调用的自身方法]"></my-childe>`。

方法2是使用props方式调用父组件的方法。有两种写法可以实现。第一种写法是在父组件中将方法传递给子组件作为props，子组件通过点击事件调用父组件传过来的方法。父组件中的子组件标签应该是`<my-childe ref="RefChilde" :xx="xx[被子组件调用的自身方法]"></my-childe>`，子组件中的props定义为`props:['xx']`，通过在`<div @click='xx'>点击调用父组件传过来的方法</div>`来调用父组件的方法。

第二种写法是在父组件中将方法传递给子组件作为props，子组件通过函数的方式调用父组件传过来的方法。父组件中的子组件标签应该是`<my-childe ref="RefChilde" :xx="xx[被子组件调用的自身方法]"></my-childe>`，子组件中的props定义为`props:{ xx:{ type:Function,并在函数内部调用`props.xx()`来调用父组件的方法。

以上是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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]