一、问题引入

原项目把一块内容直接写在了模块中(浏览器显示的一整个页面),现在想把它提成一个单独组件,而且把其中使用document.getElementById('id')改为ref获取元素的形式。

export default {

methods: {

getRely (applicationVersionId) {

let _this = this;

//axio获取数据,成功后调用drawRelationChart 初始化echart表格

},

drawRelationChart (param) {

this.relationChart = echarts.init(document.getElementById('transferRelation'));

//...

}

}

单独创建一个.vue组件,通过绑定传值,触发页面变化从而触发beforeUpdate。

class='transferRelation'

ref="transferRelation"

>

export default {

props: {

relyData: {

type: Object,

default() {

return {

data: [],

link: []

};

}

}

},

mounted() {

console.log("调用关系-mounted");

console.log(_this.$refs.transferRelation);

},

beforeUpdate() {

console.log("调用关系-beforeUpdate");

const _this = this;

//初始化图表

console.log(_this.$refs.transferRelation);

//TODO

}

};

然后发现beforeUpdate()中根本获取不到此元素,用原生js获取也不行。

1dfcb616127b

然后发现mounted中也获取不到。

1dfcb616127b

二、问题说明

mounted()生命周期函数,页面还未真正挂载到浏览器上,执行完成后立马挂在,所以无法获取到页面元素。

beforeUpdate()生命周期函数,浏览器页面还未重新跟新加载,也无法获取到元素。

三、解决

1、beforeUpdate()生命周期函数中,在获取元素语句外套用this.$nextTick(function(){...})。(mounted无效,原因待查明)

官方解释:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。即DOM真正加载完成。

1dfcb616127b

2、直接使用updated生命周期函数,页面重新加载完毕。

1dfcb616127b

Logo

前往低代码交流专区

更多推荐