父组件调用子组件里面的方法vue3

在Vue3中，父组件调用子组件里面的方法可以通过refs来实现。首先，在子组件的模板里给需要调用的元素添加一个ref属性，例如：

<template>
  <div>
    <p ref="childMethod">我是子组件里的一个元素</p>
  </div>
</template>

然后，在父组件里通过调用$refs来访问子组件里的元素，再使用这个元素的方法即可。例如：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from 'path/to/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.$refs.childMethod.innerText = '父组件调用子组件方法成功';
    }
  }
}
</script>

在上面的例子中，我们在父组件里通过$refs获取了ChildComponent子组件，然后在点击按钮时调用callChildMethod方法，这个方法里访问了子组件里的元素childMethod，最后修改了这个元素的文本。注意，我们需要通过$refs两次访问子组件里的元素，因为第一次返回的是一个代理对象，需要再次通过$refs访问实际的元素。

注意，使用$refs可能会导致代码变得脆弱，因为子组件内部的实现细节可能随时变化，从而导致父组件的$refs失效。因此，尽量不要在实际项目中频繁使用$refs。