Vue3 子组件调用父组件方法

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

方法1是通过异步方式调用。在父组件中定义一个供子组件调用的方法，然后在子组件的setup函数中使用context.emit方法触发该方法。具体代码如下：

父组件：

<my-child ref="RefChild" @update:xx="xx"></my-child>

子组件：

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

方法2是通过props方式调用。在父组件中传递一个函数作为props给子组件，然后在子组件中通过点击事件或其他方式调用该props函数。具体代码如下：

写法1：
父组件：

<my-child ref="RefChild" :xx="xx"></my-child>

子组件：

<div @click='xx'>点击调用父组件传过来的方法</div>

写法2：
父组件：

<my-child ref="RefChild" :xx="xx"></my-child>

子组件：

props:{
  xx:{ 
    type:Function, 
    required:true 
  }
},
setup(props){
  // 其他逻辑代码
  
  const Fnxx = ():void => {
    props.xx()
  }
  
  // 其他逻辑代码
  
  return { Fnxx }
}

这两种方法都可以实现子组件调用父组件的方法，具体选择哪种方法取决于你的需求和代码结构。这些方法可以在Vue3中使用，希望对你有所帮助。<span class="em">1</span><span class="em">2</span>