全局动态组件uniapp(vue)

全局动态组件uniapp(vue)

在我们很多项目中，我们需要创建一个组件，使其他在所有的路由页都存在，比如手机上的悬浮在屏幕上的圆形快捷按钮，那么我们就需要创建一个全局组件。
创建组件时我们所考虑的主要是两个点，一个是组件的创建和销毁，第二个是组件的通信。

1.组件的创建和销毁uniapp(vue)

使用 Vue.extend() 来扩展组件构造器，并手动挂载,目前有一个组件MzFloatingBox，直接调用createCustomerService就可以实现组件创建。

import MzFloatingBox from './components/MzFloatingBox.vue';
export function createCustomerService() {// 扩展 MzFloatingBox 组件构造器const CustomerServiceConstructor = Vue.extend(MzFloatingBox);// 创建组件实例const instance = new CustomerServiceConstructor();// 手动挂载到一个新的 div 元素上instance.$mount();// 将组件的 DOM 元素添加到页面上document.body.appendChild(instance.$el);// 返回组件实例（可以操作组件中的方法或数据）return instance;
}

组件销毁时，使用组件实例的 $destroy() 方法，然后移除组件的 DOM 元素。

export function destroyCustomerService(instance) {instance.$destroy();  // 销毁组件实例document.body.removeChild(instance.$el);  // 移除 DOM 元素
}

如果当前版本为vue3版本的话，那么需要使用createApp()来创建组件实例，并且需要使用unmount()方法来销毁组件实例。

  import { createApp } from 'vue';import MzFloatingBox from './components/MzFloatingBox.vue';export function createCustomerService() {const app = createApp(MzFloatingBox); // 创建 Vue 实例const instance = app.mount(document.createElement('div')); // 挂载到一个新的 DOM 元素上document.body.appendChild(instance.$el); // 将挂载后的 DOM 添加到页面上// 可以通过 instance 调用组件中的方法或数据return instance; }

销毁功能同上一样。

2.组件的通信uniapp

如果在uniapp中时，可以直接使用uni.eventBus来实现组件的通信，但是需要注意的是，在uniapp中，eventBus是一个全局变量，所以不需要在组件中引入，直接使用即可. 详细文档请点击传送门查看,具体代码如下：

// 触发自定义事件
uni.$emit('mzFloatingBox', true)
// 监听自定义事件
uni.$on('mzFloatingBox', data => {// do something
})
// 销毁自定义事件
uni.$off('mzFloatingBox', callback)

如果在vue中(vue2和vue3都支持)，可以使用mitt来作为事件总线，具体可点击传送门查看，具体代码如下：

1. 安装mitt

  npm install mitt

2. 创建一个 eventBus.js 来封装 mitt 的功能

 // src/eventBus.jsimport mitt from 'mitt';const eventBus = mitt();export default eventBus;

3. 在组件中使用 EventBus
   发送事件（emit）

  // 组件1: 发送事件<template><button @click="sendEvent">发送事件</button></template><script>import eventBus from '@/eventBus';export default {name: 'Component1',methods: {sendEvent() {eventBus.emit('customEvent', 'Hello from Component1');}}}</script>

监听事件（on）

  // 组件2: 监听事件<template><div>{{ message }}</div></template><script>import { onMounted, ref, onUnmounted } from 'vue';import eventBus from '@/eventBus';export default {name: 'Component2',setup() {const message = ref('');const handleEvent = (msg) => {message.value = msg;};onMounted(() => {eventBus.on('customEvent', handleEvent);});onUnmounted(() => {eventBus.off('customEvent', handleEvent);});return {message};}}</script>

• eventBus.emit(‘customEvent’, data)：在组件 1 中，发送一个名为 customEvent 的事件，并传递数据（如 “Hello from Component1”）。
• eventBus.on(‘customEvent’, handler)：在组件 2 中，监听 customEvent 事件并接收数据，通过 handler 函数来处理。
• eventBus.off(‘customEvent’, handler)：在组件销毁时，取消事件监听，防止内存泄漏。
• 除了 mitt，你还可以使用 Vuex 或 provide/inject 等官方推荐的方式来进行跨组件通信.但是provide/inject局限于父子/爷孙组件通信