vue-cli监听组件加载完成的方法
在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能。
1、安装vuex
npminstallvuex--save
2、在项目目录下找到store.js文件
importVuefrom'vue' importVuexfrom'vuex' Vue.use(Vuex) //监听nav模块加载完 constm_classifyone={ state:{ count:0 }, mutations:{ increment(state){ state.count++ } } } conststore=newVuex.Store({ modules:{ a:m_classifyone, b:m_classifyonepage, c:currentpage } }) exportdefaultstore;
3、在子组件中
created(){ //数据请求完成后 this.$post(address.addr+controll.mallcontroll+'/getMallHome').then(message=>{ //这里使用箭头函数是为了不改变this指向 this.$store.commit('increment'); }) }
4、通过store判断子组件数据加载完成
mounted(){ //通过store判断当前组件是否加载完成,加载完成执行页面框架 varcount=0; letcountfn=function(count){ if(count>0){ //子组件加载完成清除计时器,调用方法 clearInterval(st) pagef.pageFramefn(); } } letst=setInterval(e=>{ count=this.$store.state.a.count; countfn(count) }) //通过store判断当前组件是否加载完成,加载完成执行页面框架 }
以上这篇vue-cli监听组件加载完成的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。