子组件调用父组件方法vue3

在Vue3中，子组件调用父组件的方法有多种方式。一种常见的方式是通过props属性传递一个函数给子组件，在子组件中调用该函数以触发父组件的方法调用。这可以通过两种不同的写法实现。

第一种写法是使用emit方法，它允许子组件向父组件发送事件。在父组件中定义一个供子组件调用的方法，然后在子组件中使用emit方法触发该方法的调用。具体代码如下：

父组件组件:

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

子组件组件:

setup(props, context) {
  function fnxx() {
    context.emit('update:xx', [实参]);
  }
  return { fnxx };
}

第二种写法是通过props属性直接传递父组件的方法给子组件，在子组件中直接调用该方法。具体代码如下：

父组件组件:

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

子组件组件:

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><span class="em">4</span>