从入门到项目实战 - VUE组件跨通信：vue2 与 vue3 中实现全局事件总线

window.$bus = {}

// vue2 pack entrance mian.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

// 见 《关于 VueComponent 是什么》 部分
VueComponent.prototype.__proto__= Vue.prototype

// 摘选自 vue 源码
function initExtend(Vue) {
    /**
     * 每个实例构造函数，包括Vue，都有一个唯一的cid。
     * 这使我们能够为原型继承创建包装的“子构造函数”并缓存它们。
     */
    Vue.cid = 0;
    var cid = 1;
    /**
     * Class 继承
     */
    Vue.extend = function (extendOptions) {
        extendOptions = extendOptions || {};
        var Super = this;
        var SuperId = Super.cid;
        var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
        if (cachedCtors[SuperId]) {
            return cachedCtors[SuperId];
        }
        var name = getComponentName(extendOptions) || getComponentName(Super.options);
        if (name) {
            validateComponentName(name);
        }
        var Sub = function VueComponent(options) {
            this._init(options);
        };
        // 注意这行代码
        Sub.prototype = Object.create(Super.prototype);
        Sub.prototype.constructor = Sub;
        Sub.cid = cid++;
        Sub.options = mergeOptions(Super.options, extendOptions);
        Sub['super'] = Super;
        // 对于props和computed属性，我们在扩展时，在扩展的原型上，在Vue实例上定义代理getters。
        // 这避免了为每个创建的实例调用Object.defineProperty。
        if (Sub.options.props) {
            initProps(Sub);
        }
        if (Sub.options.computed) {
            initComputed(Sub);
        }
        // 允许进一步使用 extension/mixin/plugin
        Sub.extend = Super.extend;
        Sub.mixin = Super.mixin;
        Sub.use = Super.use;
        // 创建asset注册，这样扩展类也可以拥有它们的私有asset。
        ASSET_TYPES.forEach(function (type) {
            Sub[type] = Super[type];
        });
        // 启用 递归 自查找
        if (name) {
            Sub.options.components[name] = Sub;
        }
        // 在扩展时保留对超类选项的引用。
        // 稍后在实例化时，我们可以检查Super的选项是否已经更新。
        Sub.superOptions = Super.options;
        Sub.extendOptions = extendOptions;
        Sub.sealedOptions = extend({}, Sub.options);
        // cache constructor
        cachedCtors[SuperId] = Sub;
        return Sub;
    };
}

Sub.prototype = Object.create(Super.prototype);

function objCreate(proto, propertiesObject){
  const _obj = {} 
  _obj.__proto__ = proto;
  if(propertiesObject){
    Object.defineProperties(_obj, propertiesObject)
  }
  return _obj 
}

const _obj = {};
_obj.__proto__ = Vue.prototype;
VueComponent.prototype = _obj;  // 相当于VueComponent.prototype.__proto__ = Vue.prototype

VueComponent.prototype.__proto__ = Vue.prototype

// Object.create 的错误实现
// 以下未曾实现Object.create ，只是通过 new  关键字间接调用了现有的 Object.create 方法
function objectCreate(obj){
  function F(){}; 
  F.prototype = obj; 
  return new F(); 
}

var vm = new Vue({
  data: data
})

<template>
  <MyComponent @myevent="myCallback" />
</template>
<script>
import MyComponent from "./MyComponent.vue"
export default {
  components: [MyComponent],
  methods:{
    myCallback(){
      console.log("myevent 事件的回调 myCallback 被调用了。")
    }
  }
}
</script>

vm.$emit( eventName, […args] )

<template>
  <button @click="trig_myevent" ></button>
</template>
<script>
export default {
  methods:{
    // 触发 myevent 事件
    trig_myevent:(){
      this.$emit("myevent")
    }
  }
}
</script>

<button @click="$emit('increaseBy', 1)"></button>

<template>
  <MyComponent ref="xxx" />
</template>
<script>
import MyComponent from "./MyComponent.vue"
export default {
  components: [MyComponent],
  methods:{
    myCallback(){
      console.log("myevent 事件的回调 myCallback 被调用了。")
    }
  },
  mounted() {
      // this.$ref.xxx 是引用当前组件中的 xxx 元素的引用
      // 这里 xxx 即 MyComponent 子组件的 VueComponent 对象。
      // 其 $on 方法用于自定义事件的监听，也就是事件的绑定，实现了和 v-on 一样的效果
      this.$ref.xxx.$on("myevent", this.myCallback)
  }
}
</script>

vm.$on( event, callback )

vm.$once( event, callback )

vm.$off( [event, callback] )

<template>
  <button @click="trig_myevent" ></button>
  <button @click="unbundling_event" ></button>
</template>
<script>
export default {
  methods:{
    trig_myevent:(){
      this.$emit("myevent")
    },
    // 解绑 myevent 事件
    unbundling_event:(){
      this.$off("myevent")
    }
  }
}
</script>

const MyComponent = Vue.extend({...}) // ...表示配置信息
const vc = new MyComponent()

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
const MyComponent = Vue.extend({});
const vc = new MyComponent();
Vue.prototype.$bus = vc;
new Vue({
  render: h => h(App),
}).$mount('#app')

// 错误方式
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
let vm = new Vue({
  render: h => h(App),
}).$mount('#app')
Vue.prototype.$bus = vm;

// 正确方式
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
let vm = new Vue({
  render: h => h(App),
  beforeCreate() {
    // 安装全局事件总线
    Vue.prototype.$bus = this;
  }
}).$mount('#app')

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
const app = createApp(App);
app.use(store).use(router).mount("#app");

createApp(rootComponent: Component<any, any, any, ComputedOptions, MethodOptions>, rootProps?: Data | null | undefined): App<Element>

app.config.errorHandler = (err) => {
  /* 处理错误 */
}

app.config.globalProperties.msg = 'hello'

export default {
  mounted() {
    console.log(this.msg) // 'hello'
  }
}

npm i mitt

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import mitt from 'mitt';
const app = createApp(App);
app.config.globalProperties.$bus = mitt()
app.use(store).use(router).mount("#app");

import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
export default defineComponent({
  name: 'HomeView',
  components: {
    HelloWorld,
  }, 
  // 选项式 API：
  mounted() {
    console.log("$bus =",(this as any).$bus);
  }
});

npm install @jcstdio/jc-utils@0.0.14

import { EventEmmiter } from '@jcstdio/jc-utils'

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
const emitter = new EventEmitter();
app.config.globalProperties.$emitter = emitter;
app.mount('#app');

// 封装为插件，位置 @/plugins/event
import { EventEmitter } from "@jcstdio/jc-utils";
import type { App, Plugin } from 'vue';
const emitter = new EventEmitter();
const eventEmitterPlugin: Plugin = {
  install: (app: App) => {
    app.config.globalProperties.$emitter = emitter;
  },
};
export default eventEmitterPlugin;

// main.ts
import { createApp } from 'vue'
import eventEmitterPlugin from "@/plugins/event";
import App from './App.vue'
const app = createApp(App);
app.use(eventEmitterPlugin);
app.mount('#app');

export default {
  name: 'HomeView',
  // 选项式 API 的 mounted 选项：
  mounted() {
    console.log("$bus =",(this as any).$bus);
  }
}

<template>
<!-- ... -->
</template>
<script lang='ts' setup>
import { getCurrentInstance,onMounted } from 'vue'
import type { ComponentInternalInstance} from 'vue'
const that = getCurrentInstance() as ComponentInternalInstance;
onMounted(()=>{
  const proxy = that.proxy as ComponentPublicInstance;  
  console.log('proxy.$emitter =',proxy.$emitter);
})
</script>

interface AppConfig {
  globalProperties: Record<string, any>
}

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.config.globalProperties.msg = 'hello'
app.mount('#app');

export default {
  mounted() {
    console.log(this.msg) // 'hello'
  }
}

import { defineComponent } from 'vue'
export default defineComponent({
  mounted() {
    console.log(this.msg) // 'hello'
  }
})

const that = getCurrentInstance(); // 返回 ComponentInternalInstance 或 null（未获取到当前组件实例）

const proxy = that.proxy as ComponentPublicInstance;

import axios from 'axios'
declare module 'vue' {
  interface ComponentCustomProperties {
    $http: typeof axios
  }
}
export {}

// 一个 xx.d.ts, 需要在 tsconfig.json 文件中include 进来
import axios from 'axios'
declare module 'vue' {
  interface ComponentCustomProperties {
    $http: typeof axios,    //如果你还添加了全局 app.config.globalProperties.$http
    $emitter: EventEmitter
  }
}
export {}