全局动态组件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来作为事件总线，具体可点击传送门查看，具体代码如下：
- 安装mitt
npm install mitt
- 创建一个 eventBus.js 来封装 mitt 的功能
// src/eventBus.jsimport mitt from 'mitt';const eventBus = mitt();export default eventBus;
- 在组件中使用 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局限于父子/爷孙组件通信