前言：今天在开发落地页项目的时候，有这样的一个业务：

  1. 角色在登录之后，需要知道这个用户是否之前有绑定过角色，
  2. 因为一个账号有多个角色，但是能够领取奖励的只能有一个角色
  3. 所以需要知道这个用户是否有绑定过角色，如果有，那么直接跳过绑定角色这一步，如果没有，转到绑定角色的弹窗去。
  4. 但是现在就有个问题，我弹窗是自己做的一个用来装其他，比如登录框、绑定框、选择账号框的一个父组件，这里用到的绑定角色框是其中的一个子组件。
  5. 但是绑定角色里面的逻辑业务是需要在这个子组件里面调用的，不能放在像pinia、vuex里面这种公共区域调用，也不能放在别的组件中调用，所以现在有这样一个需求，vue3中父组件调用子组件的方法

实现方法

在网上看到很多都是说用ref给子组件绑定一个值，然后在子组件中通过defineExpose将要调用的方法暴露出去。

但是弄了很多次，子组件ref绑定的值一直是undefined，不知道是不是我操作姿势不知道还是什么。

vue3-eventbus

这是一个很好用的插件，类似于vue2中的事件总线，特别好用，只需要在要被调用的子组件中用bus.on()，设置要监听的方法名和，触发的函数。

在全局注册

1
2
3
4
5
import eventBus from 'vue3-eventbus'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.use(eventBus)

在子组件中

1
2
3
4
5
6
7
8
9
10
11
<script setup>
import bus from 'vue3-eventbus';

onMounted(() => {
  bus.on('bindrole', () => {
    // 绑定角色的方法
    BindRole()
    console.log("绑定角色")
  })
})
</script>

在父组件中

1
2
3
4
5
function bindOnlyRole(){
  // event-bus yyds
  // 触发绑定角色事件
  bus.emit('bindrole')
}

此外，这个也能用于子组件与子组件、子组件与父组件间等等的传值、方法调用，很好用。

使用方法基本都差不多，要调用方法的组件中，用bus.on()来监听要触发的方法，在其他组件中用bus.emit()来触发相关方法，用方法名来做依据。