vue项目子组件在父组件mount之后的一些操作

小咪咪 2022-09-06 00:22 201阅读 0赞

# 1. 问题背景 #

在vue结合cesium框架中，子组件一般是在父组件在初始化完毕view对象后需要做进一步的操作。而view对象的创建是基于dom结构构件之后的操作。我们知道，vue的生命周期为如下表示：

开始

父beforeCreate

父create

父beforeMount

子beforeCreate

子create

子beforeMount

子mounted

父mounted

结束

而对于单个vue的生命周期如下:

开始

beforeCreate

create

beforeMount

mounted

结束

这里需要明确的是dom的构建是在`beforeMount`之后、`mounted`之前初始化好的，如果父组件的初始化方法放到`beforeMount`中，由于`var viewer = new Cesium.Viewer('cesiumContainer')`要用到父组件的dom结构，所以必须放到`mounted`中，此时，子组件在没有可以实现代码的方法。基于此，这里有两种实现方法，仅供大家参考。

# 2. 方法一 #

*  父组件

// 父组件
    beforeMount() { 
    	window.finishedMounted = this._isMounted
    },
    mounted() { 
    	//业务代码逻辑
    	window.parentMounted = this._isMounted
    }

*  子组件

// 子组件
    mounted() { 
        let pMountedTimer = window.setInterval(() => { 
            if (window.parentMounted) { 
    	       window.clearInterval(pMountedTimer)
    	       //业务逻辑
    		   this.initData()
            }
        }, 500)
    }

# 方法二 #

*  父组件

mounted() { 
        this.initCesium()
        this.createView()
        // 便利所有组件的initFun方法
        //只要子组件有initMount方法就会被执行
        for (const obj in this.$refs) { 
          const fun = this.$refs[obj].initMount
          if (fun) { 
            fun()
          }
        }
      },

*  子组件

methods: { 
        initMount() { 
          console.log('demo1')
        }
      }