父组件等待子组件完成后执行

父组件等待子组件完成后执行

子组件有一些配置文件需要异步执行，父组件要等子组件加载完成后，执行父组件后续逻辑，想不出更好的监听子组件加载完成好办，所以写了个这么样子的东西，如果有什么好的想法，大家提一提

//father.vue
<template>
  <div>
    <Child ref="child" />
    <el-row>
      <el-button @click="showName">点击</el-button>
    </el-row>
  </div>
</template>

<script>
import Child from './Child'
export default {
  name:'Father',  //
  components:{ Child },
  methods:{
    showName(){
      this.$refs.child.showName()
    }
  },
  async mounted(){
    const result = await this.$refs.child.init()
    console.log('father',result)
    console.log('我是等了1秒钟后的Father')
  }
}
</script>

// child.vue
<template>
  <div>
    我是Child
  </div>
</template>

<script>
export default {
  name:'Children',
  methods:{
    showName(){
      console.log('Children')
    },
    init(){
      return new Promise( function( reslove, reject){
      	// 模拟异步，加载组件
        setTimeout( function(){
          console.log('等了1秒钟')
          reslove(1000)
        }, 1000)
      })
    }
  }
}
</script>