当前位置：首页 > news >正文

全局动态组件uniapp(vue)

news 来源：原创 2025/5/15 3:02:54

全局动态组件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.js
 import 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局限于父子/爷孙组件通信