这种场景,如何设计 vue 主页面分发消息给子组件?-灵析社区

`vue` 项目, 有多个主页面,这里用 `Home.vue` `About.vue` 模拟 每个主页面内部有一个 `websocket` 且有多个`不同层级`的子组件,这里用 `HellowWorld.vue`模拟 每当主页面收到 `websocket` 消息的时候,通过`某种方式`通知到子组件 我目前的方案 * Home.vue home import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld }, data () { return { wsChildren: [] } }, provide () { return { ipcRoot: this } }, methods: { send (data) { this.wsChildren.forEach(vm => vm.onWsMessage(data)) } } } * About.vue about // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'About', components: { HelloWorld }, data () { return { wsChildren: [] } }, methods: { send (data) { this.wsChildren.forEach(vm => vm.onWsMessage(data)) } } } * HelloWorld.vue child export default { name: 'HelloWorld', inject: { ipcRoot: { default: null // 提供默认值为 null，当没有找到 ipcRoot 时使用 } }, mounted () { if (this.ipcRoot && this.ipcRoot.wsChildren) { this.ipcRoot.wsChildren.push(this) } }, methods: { onWsMessage (data) { console.log('__SY__🎄 ~ HelloWorld onWsMessage ~ data:', data) } } } 也就是当子组件挂载完成后,主页面主动收集,然后通过遍历去分发消息,这种模式以后的维护性如何? 请问各位到老有没有更好的方式,虚心求教!!!