自己想做个网站 费用,宁波网站建设按需定制,在网站上做外贸,三项措施做好门户网站建设全局动态组件uniapp(vue)
在我们很多项目中#xff0c;我们需要创建一个组件#xff0c;使其他在所有的路由页都存在#xff0c;比如手机上的悬浮在屏幕上的圆形快捷按钮#xff0c;那么我们就需要创建一个全局组件。 创建组件时我们所考虑的主要是两个点#xff0c;一个…全局动态组件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: 发送事件templatebutton clicksendEvent发送事件/button/templatescriptimport eventBus from /eventBus;export default {name: Component1,methods: {sendEvent() {eventBus.emit(customEvent, Hello from Component1);}}}/script监听事件on// 组件2: 监听事件templatediv{{ message }}/div/templatescriptimport { 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};}}/scripteventBus.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局限于父子/爷孙组件通信
