问题遇到的现象和发生背景
在element-ui中，第一次的时候是可以正确获取到的el-drawer设置了destroy-on-close 中使用子组件，第二次打开drawer的时候，子组件获取自己内部this.$refs元素时为undefined
问题相关代码，请勿粘贴截图
drawer
<template>
<el-drawer
class="tk-dialog"
title='编辑'
:visible.sync='visible'
width='518px'
@opened="handleOpen"
:before-close='handleClose'
:append-to-body='true'
:destroy-on-close='true' // 设置了这个属性
>
....
<web-map ref="webmap1"></web-map>
</el-drawer>
</template>
<script>
import webMap from '@/components/webMap.vue
export default {
...
methods: {
async handleOpen() {
await this.$refs.webmap1.$init() // 第二次打开drawer，触发这个函数时，打印的内容为undefined
}
}
}
....
</script>
webMap.vue
<template>
<div ref='viewContainer' id="viewDiv"></div>
</template>
<script>
import { mapControl } from '@/mixins/map.js'
export default {
mixins:[mapControl],
...
}
....
</script>
map.js
....
export const mapControl = {
methods: {
$_init(){ // 一个异步函数
console.log(this.$refs.viewContainer)
return new Promise()
}
}
}
运行结果及报错内容
....
export const mapControl = {
$_init(){
console.log(this.$refs.viewContainer) 第一次可以正确拿到，第二次为undefined
}
}
我的解答思路和尝试过的方法
$_init(){
this.$nextTick(_=>{
console.log(this.$refs.viewCohttps://img-mid.csdnimg.cn/release/static/image/mid/ask/641865859836157.png "#left")
ntainer) 第一次可以正确拿到，第二次为undefined
})
}
在子组件的mounted（map.js->mounted）能够正确的打印出 this.$refs.viewContainer 的结果，而drawer中调的$_init()不能正确的打印出结果。
我想知道第一次调用$_init() Vue中的执行顺序与第二次Vue中的执行的顺序有什么区别吗？
我想要达到的结果
this.$refs.webmap1.$_init() // 能在控制台能打印出元素对象，而不是undefined
在子组件的mounted（map.js->mounted）能够正确的打印出 this.$refs.viewContainer 的结果，而drawer中调的$_init()不能正确的打印出结果。
我想知道第一次调用$_init() Vue中的执行顺序与第二次Vue中的执行的顺序有什么区别吗？
