vue组件是什么时候加载的？

Question

plan.vue的dialog中有子组件basicSet，子组件里都有plan.vue需要的参数

     <!-- plan.vue -->
    <el-button type="primary" @click="dialogFormVisible = true">高级设置</el-button>
    <el-dialog title :visible.sync="dialogFormVisible" :show-close="false">
      <div>
         <basicSet></basicSet>
      </div>
    </el-dialog>
    
    
    mounted(){
        console.log('父组件加载')
    }

子组件

     <!-- basicSet.vue -->
     mounted(){
         console.log('子组件加载')
     }

打开页面打印 111
点击高级设置才打印 222
因为父组件需要子组件中的数据 怎么才能在不点击高级设置的情况下加载子组件？

Answer 1

肯定是先加载父组件然后再加载子组件，这和人物关系是一样的

对于这种情况，建议把数据放在父组件中，然后传递给子组件

Answer 2

你可以把el-dialog写在子组件里

父组件

<!-- 父组件 -->
<template>
  <div class="index">
    <test ref="test"></test>
    <el-button type="primary" @click="click">高级设置</el-button>
  </div>
</template>

<script>
const test = () => import("./test.vue"); // 引入子组件
export default {
    components:{
        test
    },
    data() {
        return {};
    },
    mounted(){
        console.log("index")
    },
    methods: {
        click(){
            // 打开子组件
            this.$refs.test.dialogFormVisible = true;
        }
    }
  }
</script>

<style>
</style>

子组件

<!--子组件-->
<template>
    <div class="test">
        <el-dialog title :visible="dialogFormVisible" :show-close="false" >
            <span>子组件内容</span>
        </el-dialog>
    </div>
</template>

<script>
export default{ 
    data(){
        return {
            dialogFormVisible: false,
        }
    },
    mounted(){
        console.log("test");
    }
}
</script>

<style>
</style>