vue3调用孙组件方法

在Vue3项目开发中，有时需要从父组件调用孙组件的方法。下面将介绍几种解决方案。

1. 通过provide和inject

这是Vue3提供的依赖注入功能，可以在祖先组件中提供数据或方法，在子孙组件中注入使用。

vue
// 爷爷组件

  <div>
    
    <button>Call Grandchild Method</button>
  </div>
</p>


import { provide, ref } from 'vue'

const grandchildMethod = ref(null)

provide('grandchildMethod', (method) => {
  grandchildMethod.value = method
})

function callGrandchildMethod() {
  if (grandchildMethod.value) {
    grandchildMethod.value()
  }
}


<p>

vue
// 孙子组件</p>


import { inject, onMounted } from 'vue'

const setGrandchildMethod = inject('grandchildMethod')

onMounted(() => {
  setGrandchildMethod(() => {
    console.log('Grandchild method called!')
  })
})


<p>

2. 使用ref引用

这种方法适用于父子关系明确的场景。

vue
// 父组件

  <div>
    
    <button>Call Grandchild Method</button>
  </div>
</p>


import { ref } from 'vue'
import Child from './Child.vue'

const childRef = ref(null)

function callGrandchildMethod() {
  if (childRef.value && childRef.value.$refs.grandchildRef) {
    childRef.value.$refs.grandchildRef.someMethod()
  }
}


<p>

vue
// 子组件

  
</p>


import Grandchild from './Grandchild.vue'


<p>

vue
// 孙子组件</p>


function someMethod() {
  console.log('Grandchild method called!')
}


<p>

3. 使用事件总线

适合跨层级通信，但要注意避免滥用。

javascript
// eventBus.js
import { createApp } from 'vue'
const app = createApp({})
export const eventBus = app.config.globalProperties.eventBus = new Vue()</p>

<p>// 爷爷组件
import { eventBus } from './eventBus'</p>

<p>function callGrandchildMethod() {
  eventBus.$emit('call-grandchild-method')
}</p>

<p>// 孙子组件
import { eventBus } from './eventBus'</p>

<p>onMounted(() => {
  eventBus.$on('call-grandchild-method', () => {
    console.log('Grandchild method called!')
  })
})

推荐使用种provide/inject方式，它更符合Vue3的设计理念，代码结构也更加清晰。而ref引用的方式虽然直观，但在复杂层级结构下维护成本较高。事件总线则容易导致代码耦合度过高，应谨慎使用。

选择合适的方法取决于具体的应用场景：
- 如果是临时性、一次性操作，建议使用provide/inject
- 如果是经常性的交互，可以考虑重构为更直接的父子关系
- 对于简单的跨层级通信，provide/inject仍然是选择

记住，良好的组件设计应该尽量减少不必要的跨层级通信，保持组件的独立性和可复用性。