vue3组件导出方法

在Vue 3项目开发中，有时我们需要将组件中的方法暴露给外部使用，比如父组件调用子组件的方法。介绍几种Vue 3中组件导出方法的解决方案。

一、通过ref获取子组件实例

这是最常用的一种方式。在子组件中定义要暴露的方法：

vue

  <div>
    <!-- 子组件内容 -->
  </div>
</p>


import { defineExpose } from 'vue'

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

defineExpose({
  sayHello // 暴露方法
})


<p>

然后在父组件中通过ref来获取子组件实例并调用方法：

vue

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


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

const childRef = ref(null)

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


<p>

二、通过provide/inject

这种方式适合跨层级组件通信。在父组件中provide方法：

vue</p>


import { provide } from 'vue'

const sharedMethod = () => {
  console.log('shared method called')
}

provide('myMethod', sharedMethod)


<p>

在子组件中inject该方法：

vue</p>


import { inject } from 'vue'

const myMethod = inject('myMethod')

// 现在可以在子组件中使用myMethod了


<p>

三、通过事件总线

虽然Vue 3不再推荐使用全局事件总线，但在某些场景下仍可使用局部事件总线或mitt库来实现：

1. 安装mitt：npm install mitt
2. 创建事件总线：
   javascript
// eventBus.js
import mitt from 'mitt'
const bus = mitt()
export default bus

3. 在子组件中触发事件：
   ```vue

import bus from './eventBus'

const emitMethod = () => {
bus.emit('methodName', payload)
}


4. 在需要接收的地方监听：
vue

import bus from './eventBus'

bus.on('methodName', (payload) => {
// 处理逻辑
})

```

以上三种方法各有优缺点，开发者可以根据实际需求选择合适的方式。需要注意的是，直接操作子组件实例可能会破坏组件封装性，因此在使用时应谨慎考虑。

(www.nzw6.com)