vue3ref调用子组件方法

在Vue 3中，要调用子组件的方法，你可以使用ref。首先，在父组件中，使用ref声明一个变量来存放子组件的引用。然后，在子组件中，将需要调用的方法放在setup函数中，并返回给父组件使用。最后，在父组件的setup函数中，使用ref的value属性来调用子组件的方法。

下面是一个示例代码：

// 子组件 Child.vue
template>
  <div>
    <button @click="changeShowText">{{ conts }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const conts = ref("我是子组件");

const changeShowText = () => {
  conts.value = "22222222222";
}

return {
  conts,
  changeShowText
}
</script>

// 父组件 Parent.vue
<template>
  <div>
    <Child ref="child" />
    <button @click="callChildMethod">调用子组件的方法</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const child = ref(null);

const callChildMethod = () => {
  child.value.changeShowText();
}

return {
  child,
  callChildMethod
}
</script>

在上面的示例中，我们通过ref来声明了一个child变量来存放子组件的引用。然后，在父组件的callChildMethod函数中，我们使用child.value来调用子组件的changeShowText方法。

希望这个例子对你有所帮助！