全局动态组件uniapp(vue)

全局动态组件uniapp(vue)

在我们很多项目中,我们需要创建一个组件,使其他在所有的路由页都存在,比如手机上的悬浮在屏幕上的圆形快捷按钮,那么我们就需要创建一个全局组件。

创建组件时我们所考虑的主要是两个点,一个是组件的创建和销毁,第二个是组件的通信。

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

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

javascript 复制代码
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 元素。

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

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

javascript 复制代码
  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是一个全局变量,所以不需要在组件中引入,直接使用即可. 详细文档请点击传送门查看,具体代码如下:

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

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

  1. 安装mitt
javascript 复制代码
  npm install mitt
  1. 创建一个 eventBus.js 来封装 mitt 的功能
javascript 复制代码
 // src/eventBus.js
 import mitt from 'mitt';

 const eventBus = mitt();

 export default eventBus;
  1. 在组件中使用 EventBus
    发送事件(emit)
javascript 复制代码
  // 组件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)
javascript 复制代码
  // 组件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局限于父子/爷孙组件通信
相关推荐
daols883 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台6 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴6 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust6 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放7 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝8 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele8 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试