欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

vue-cli监听组件加载完成的方法

时间:2020-12-15 02:09:59|栏目:vue|点击:

在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能。

1、安装vuex

npm install vuex --save

2、在项目目录下找到store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

 //监听nav模块加载完
const m_classifyone = {
 state: {
 count:0
 },
 mutations: { 
 increment (state) {
  state.count++
 }
 }
}

const store = new Vuex.Store({
modules: {
 a: m_classifyone,
 b: m_classifyonepage,
 c:currentpage
 }
})
export default store;

3、在子组件中

created(){

//数据请求完成后
this.$post(address.addr+controll.mallcontroll+'/getMallHome').then(message => {

//这里使用箭头函数是为了不改变this指向
this.$store.commit('increment');
}) 
}

4、通过store判断子组件数据加载完成

mounted(){
//通过store判断当前组件是否加载完成,加载完成执行页面框架
var count = 0;

let countfn = function(count){
if(count>0){

//子组件加载完成清除计时器,调用方法
clearInterval(st)
pagef.pageFramefn();
}
}
let st = setInterval(e => {
count = this.$store.state.a.count;
countfn(count)
})
//通过store判断当前组件是否加载完成,加载完成执行页面框架
}

上一篇:Vue实现todolist删除功能

栏    目:vue

下一篇:vue.js图片转Base64上传图片并预览的实现方法

本文标题:vue-cli监听组件加载完成的方法

本文地址:http://www.codeinn.net/misctech/33152.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有