父组件等待子组件完成后执行
父组件等待自组件完成后执行子组件有一些配置文件需要异步执行,父组件要等子组件加载完成后,执行父组件后续逻辑,想不出更好的监听子组件加载完成好办,所以写了个这么样子的东西,如果有什么好的想法,大家提一提//father.vue<template><div><Child ref="child" /><el-row><el-button @click
·
父组件等待子组件完成后执行
子组件有一些配置文件需要异步执行,父组件要等子组件加载完成后,执行父组件后续逻辑,想不出更好的监听子组件加载完成好办,所以写了个这么样子的东西,如果有什么好的想法,大家提一提
//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>
更多推荐
已为社区贡献1条内容
所有评论(0)