弹窗加载另一个界面

1.父组件

<template>
  <el-button @click="selectHiddenDangerList()" >
  </el-button>
  <HiddenDangerList v-if="listVisable" ref="hiddenDangerList"></HiddenDangerList>
</template>
<script>
import HiddenDangerList from "/hiddenDangerList";
export default {
  components: {
      HiddenDangerList,
  },
  data () {
    return {
            listVisable: false,
    }
  },
  methods: {
    selectHiddenDangerList () {
        this.listVisable = true;
        this.$nextTick(() => {
            this.$refs.hiddenDangerList.init();
        });
    },
}
</script>

2.子组件

<template>
    <el-dialog title="弹窗"
        :visible.sync="dialogVisible"
        width="95%">
    </el-dialog>
</template>

<script>
export default {
    name: "hiddenDangerList",
    data () {
        return {
            dialogVisible: false,
        }
    },

    methods : {
        init() {
            // this.initData();
            // 展示弹窗
            this.dialogVisible = true;
        },
    }
}
</script>