Vue3 组件传值：使用 provide 和 inject 替代 $bus

Vue3 中可以使用'createApp'创建应用，然后通过'provide'和'inject'实现组件之间的传值。不再需要使用 Vue2 中的'$bus'。

1. 创建应用

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

2. 在组件中使用'provide'提供数据

export default {
  setup() {
    const message = 'Hello world'
    provide('message', message)
    ...
  }
}

3. 在需要接收数据的组件中使用'inject'获取数据

export default {
  setup() {
    const message = inject('message')
    ...
  }
}

使用'inject'时，可以提供一个默认值作为参数。如果'provide'中没有提供相应的值，就会使用默认值。

export default {
  setup() {
    const message = inject('message', 'Default message')
    ...
  }
}