全局组件的挂载和卸载

qianduan1020

于 2021-11-08 17:12:15 发布

阅读量602

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qianduan1020/article/details/121211651

vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

arcgis for js

5 篇文章

订阅专栏

本文探讨了在Vue.js中如何管理和操作全局组件的挂载与卸载过程，通过实例代码`live-play.js`和核心配置文件`main.js`的解析，详细阐述了组件的生命周期方法在实际应用中的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

live-play.js

import Vue from 'vue'
import LivePlayDialog from '@/components/live-play-dialog.vue' //挂载的组件
const PopupBox = Vue.extend(LivePlayDialog) // extend 注册全局

let instance
LivePlayDialog.install = function (data) {
  console.log(data, 222222)
  instance = new PopupBox({ // new实例化； 传参用propsData
    propsData: {
      featureGraphicAttributes: data
    }
  }).$mount()
  instance.$nextTick(() => {
    const { mapView } = window
    mapView.popup.content = instance.$el
  })
}
LivePlayDialog.unInstall = function() { // 卸载
  if (instance) {
    instance.$destroy()
    instance = null
  }
}

export default LivePlayDialog

main.js

import LivePlay from '@/utils/map/live-play.js'
Vue.prototype.$livePlay = LivePlay

使用

 this.$livePlay.install(data) //挂载
 this.$livePlay.unInstall(data) // 卸载