vue3进入组件调用组件的方法

### 调用其他组件方法的方式

在 Vue 3 中，直接从一个组件调用另一个组件的方法并不是推荐的做法。更好的做法是通过事件或状态管理来实现跨组件通信[^1]。

一种常见的解决方案是使用 `provide` 和 `inject` API 来共享函数或数据：

// ParentComponent.vue
<template>
  <child-component />
</template>

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

function parentMethod() {
  console.log('Parent method called')
}

provide('parentMethod', parentMethod)
</script>

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

const parentMethod = inject('parentMethod')

// 可以在任何地方调用父级方法
parentMethod()
</script>

另一种方式是在进入子组件时触发特定行为，可以利用 Vue 的生命周期钩子 `onMounted()` 或者路由守卫中的导航完成回调:

// 子组件内定义
<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

onMounted(() => {
  // 组件挂载完成后执行的操作
})
</script>

如果确实需要直接访问其他实例，则可以通过 `$refs` 属性获取对子组件的引用并调用其公开的方法:

<!-- 父组件模板 -->
<Child ref="childInstance" />

<button @click="callChildMethod">Call child method</button>

// 父组件脚本部分
export default {
  methods: {
    callChildMethod () {
      this.$refs.childInstance.someExposedMethod();
    }
  }
}

需要注意的是，在服务端渲染期间不会调用某些客户端特有的生命周期钩子。