添加事件总线

dev/serve.ts

 import { createApp } from 'vue'
 import Dev from './serve.vue'
 import MyComponent from '@/components/MyComponent'
+import EventBus from '@/util/event-bus'
 
-createApp(Dev).use(MyComponent).mount('#app')
+createApp(Dev).use(MyComponent).use(EventBus).mount('#app')

dev/serve.vue

 <template>
   <div id="main">
-    <div v-for="(component, key) in components" :key="key" class="box" :class="{pro: isPro}">
+    <div
+      v-for="(component, key) in components"
+      :key="key"
+      class="box"
+      :class="{ pro: isPro }"
+    >
       <component :is="component" />
-      <p v-if="isPro" class="name" title="点击复制" @click="copyName(component.name)">
+      <p
+        v-if="isPro"
+        class="name"
+        title="点击复制"
+        @click="copyName(component.name)"
+      >
         {{ component.name }}
       </p>
     </div>
@@ -17,6 +27,7 @@ export default defineComponent({
 </script>
 <script lang="ts" setup>
 import * as components from '@/lib/index'
+import eventBus from '@/util/event-bus'
 
 const isPro = computed(() => process.env.NODE_ENV === 'production')
 function copyName(name) {
@@ -27,6 +38,9 @@ function copyName(name) {
   document.execCommand('Copy')
   document.body.removeChild(input)
 }
+eventBus.on('map', (e: any) => {
+  console.log('emit by bus:', e)
+})
 </script>
 
 <style lang="stylus" scoped>

package-lock.json

@@ -38,6 +38,7 @@
         "eslint-plugin-prettier": "^3.4.0",
         "eslint-plugin-vue": "^7.14.0",
         "minimist": "^1.2.5",
+        "mitt": "^3.0.0",
         "naive-ui": "^2.19.5",
         "normalize.css": "^8.0.1",
         "postcss": "^8.2.10",
@@ -11694,6 +11695,12 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==",
+      "dev": true
+    },
     "node_modules/mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -29415,6 +29422,12 @@
         "through2": "^2.0.0"
       }
     },
+    "mitt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==",
+      "dev": true
+    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",

package.json

@@ -52,6 +52,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.14.0",
     "minimist": "^1.2.5",
+    "mitt": "^3.0.0",
     "naive-ui": "^2.19.5",
     "normalize.css": "^8.0.1",
     "postcss": "^8.2.10",

src/components/MyComponent/MyChart/my-bar.vue

@@ -62,7 +62,7 @@ export default defineComponent({
     }
     const { chartRef, initChart } = useChartGenerate(
       defaultOption,
-      defaultSeriesItem
+      defaultSeriesItem,
     )
     onMounted(() => {
       const instance = initChart(props.dataset, props.option)

src/entry.esm.ts

 import { App, Plugin } from 'vue'
-
-import * as components from '@/lib/index'
+import EventBus from './util/event-bus'
+import * as componentLib from '@/lib/index'
 
 const install: Exclude<Plugin['install'], undefined> = function (app: App) {
   Object.entries(components).forEach(([componentName, component]) => {
     app.component(componentName, component)
   })
 }
-export default install
 
-export * from '@/lib/index'
+export const eventBus = EventBus
+export const components = componentLib
+
+export default install

src/entry.ts

-import * as components from '@/lib/index'
+import { components, eventBus } from './entry.esm'
 
 export default function (url: string) {
   window._base_url = url
-  return components
+  return { components, eventBus }
 }

src/lib/A001/index.vue

@@ -14,6 +14,7 @@
             color: '#fff',
           }"
           :color="['rgb(36,59,86)', '#F4923E']"
+          @click="test(item)"
         />
       </div>
       <div class="right">
@@ -46,6 +47,8 @@ import icon1 from '@/assets/images/icon1.png'
 import icon2 from '@/assets/images/icon2.png'
 import icon3 from '@/assets/images/icon3.png'
 import Brief from '@/components/brief.vue'
+import eventBus from '@/util/event-bus'
+
 const summary = [
   { icon: icon1, name: '小区', value: 904 },
   { icon: icon2, name: '业委会', value: 400 },
@@ -56,6 +59,9 @@ const list = [
   { name: '物企双周查', value: 83 },
   { name: '物业日查', value: 100 },
 ]
+const test = () => {
+  eventBus.emit('map', 'A001')
+}
 </script>
 
 <style lang="stylus" scoped>

src/lib/A002/index.vue

@@ -26,6 +26,8 @@ import icon8 from '@/assets/images/icon8.png'
 import avatar1 from '@/assets/images/avatar1.png'
 import Brief from '@/components/brief.vue'
 import Summary from '@/components/summary.vue'
+import eventBus from '@/util/event-bus'
+import { ref } from 'vue'
 
 const summary = [
   { icon: icon4, name: '商品房', value: 904 },
@@ -35,11 +37,14 @@ const summary = [
   { icon: icon7, name: '军产', value: 12 },
   { icon: icon8, name: '保障房', value: 46 },
 ]
-const list = [
+const list = ref([
   { name: '分户', value: 47520 },
   { name: '门牌', value: 3960 },
   { name: '小区', value: 45 },
-]
+])
+eventBus.on('update:A002', (data: any) => {
+  list.value = data
+})
 </script>
 
 <style lang="stylus" scoped>

src/util/event-bus.ts

+import mitt from 'mitt'
+import { App } from 'vue'
+
+const eventBus = mitt()
+
+export interface Options {
+  global: boolean
+  inject: boolean
+  globalPropertyName: string
+  injectName: string
+}
+const defaultOptions: Options = {
+  global: true,
+  inject: true,
+  globalPropertyName: '$eventBus',
+  injectName: '$eventBus',
+}
+
+function install(app: App, options: Partial<Options>) {
+  const opt = {
+    ...defaultOptions,
+    ...options,
+  }
+  if (opt.global) {
+    app.config.globalProperties[opt.globalPropertyName] = eventBus
+  }
+  if (opt.inject) {
+    app.provide(opt.injectName, eventBus)
+  }
+  return eventBus
+}
+
+type EventBus = { install: typeof install } & typeof eventBus
+;(eventBus as EventBus).install = install
+
+export default eventBus as EventBus