vue3中使用ref进行父子组件进行方法调用的实例

在 Vue3 中，可以使用 `ref` 对象进行父子组件之间的方法调用，具体步骤如下：

1. 在父组件中定义 `ref` 对象，并将其作为 props 传递给子组件。

<template>
  <div>
    <child-component :showMessage="showMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello World!')

    const showMessage = () => {
      alert(message.value)
    }

    return {
      message,
      showMessage
    }
  }
}
</script>

2. 在子组件中接收 `props` 并将其转换为本地的 `ref` 对象。

<template>
  <div>
    <button @click="showMessage">Show Message</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    showMessage: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    const showMessage = () => {
      props.showMessage()
    }

    return {
      showMessage
    }
  }
}
</script>

这样，父组件中定义的 `showMessage` 方法就可以在子组件中调用了。需要注意的是，在子组件中调用父组件的方法时，需要使用 `props` 对象中传递的 `ref` 对象的 `value` 属性，即 `props.showMessage()`。