vue3组件抛出方法

在Vue 3项目中，组件之间的通信是开发过程中不可避免的问题。当父组件需要调用子组件中的方法时，可以通过多种方式实现这一需求。介绍几种常见的解决方案，并提供详细的代码示例。

1. 使用ref引用子组件实例

最直接的方式是通过ref属性获取子组件实例，然后调用其公开的方法。这种方式简单直观，适用于父子组件关系明确的场景。

解决方案：

• 在子组件中定义需要暴露的方法。
• 父组件使用ref引用子组件实例。
• 调用子组件实例上的方法。

vue
<!-- ChildComponent.vue --></p>


import { defineExpose } from 'vue'

const sayHello = () => {
  console.log('Hello from child component!')
}

defineExpose({
  sayHello
})


<p>
  <div>Child Component</div>

vue
<!-- ParentComponent.vue --></p>


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

const childRef = ref(null)

const callChildMethod = () => {
  if (childRef.value) {
    childRef.value.sayHello()
  }
}


<p>
  
  <button>Call Child Method</button>

2. 使用事件总线（mitt库）

对于跨层级组件通信或多个组件之间通信的场景，可以考虑使用事件总线。Vue 3不再内置全局事件总线，但我们可以使用第三方库如mitt来实现类似功能。

解决方案：

• 安装并引入mitt库。
• 创建一个事件总线实例。
• 子组件触发自定义事件。
• 父组件监听该事件。

bash
npm install mitt


js
// eventBus.js
import mitt from 'mitt'
const eventBus = mitt()
export default eventBus


vue
<!-- ChildComponent.vue --></p>


import eventBus from './eventBus'

const notifyParent = () => {
  eventBus.emit('customEvent', 'Message from child')
}


<p>
  <button>Notify Parent</button>

vue
<!-- ParentComponent.vue --></p>


import { onMounted, onUnmounted } from 'vue'
import eventBus from './eventBus'

onMounted(() => {
  eventBus.on('customEvent', (message) => {
    console.log(message)
  })
})

onUnmounted(() => {
  eventBus.all.clear()
})


<p>

3. 使用provide/inject

对于祖代与后代组件之间的通信，或者共享状态管理，可以使用provide和inject。这种方式适用于多层嵌套组件间的通信。

解决方案：

• 祖代组件通过provide提供方法。
• 后代组件通过inject注入并调用该方法。

vue
<!-- GrandparentComponent.vue --></p>


import { provide } from 'vue'

const greet = () => {
  console.log('Hello from grandparent')
}

provide('greet', greet)


<p>
  

vue
<!-- ChildComponent.vue --></p>


import { inject } from 'vue'

const greet = inject('greet')


<p>
  <button>Greet from Grandparent</button>

以上三种方法各有优劣，选择哪种取决于具体的应用场景。通常情况下，推荐优先使用ref方式，因为它更符合Vue的响应式设计理念；而对于复杂场景，则可以考虑结合使用其他两种方式。