Vue——子组件每次显示的时候都执行初始化的办法

问题：有个空间查询的子组件，需要每次显示的时候后初始化一下某些变量和hander等。

思路：

1.父组件用v-if来控制子组件显示销毁；

2.子组件用created来调用初始化方法

直接上代码

父组件：

<template>
    <div>
        <a href="#" class="hongLD" @click="spatialQuery3D">空间查询</a>
        // 空间查询的子组件
        <spatial-query v-if="isShowSpatialQuery3DPanle" @closeSpatialQuery3D_="closeSpatialQuery3D" />
    </div>
</template>
<script>
import spatialQuery from "../components/spatialQuery3D/spatialQuery3D";

export default {
components: {
    spatialQuery,
},
data() {
    return {
        isShowSpatialQuery3DPanle: false,
    }
},
methods: {
    // 显示组件
    spatialQuery3D(){
        this.isShowSpatialQuery3DPanle = !this.isShowSpatialQuery3DPanle
    },
    // 关闭组件（销毁）
    closeSpatialQuery3D(){
        this.isShowSpatialQuery3DPanle = false
    }
}

子组件：

<template>
    <div>
        <div>空间查询</div>
        // ……………………
    </div>
</template>
<script>

export default {
components: {
    spatialQuery,
},
data() {
    return {
        geometryType:null,
        positionMode: null,
    }
},
created(){
    this.initQuery();
    console.log('初始化完成');
},
methods: {
    initQuery() { 
        this.geometryType = "box";
        this.positionMode = "intersects";
        console.log('初始化完成');
    },
    // 调用父组件方法关闭组件
    close(){
        this.$emit("closeSpatialQuery3D_", false);
    }
}