Father.vue:
<script> import Child from './Child' export default { beforeCreate() { console.log('父组件 beforeCreate') }, created() { console.log('父组件 created') }, render() { console.log('父组件 render') return ( <div> <h1>父组件</h1> <Child /> </div> ) }, beforeMount() { console.log('父组件 beforeMount') }, mounted() { console.log('父组件 mounted') }, components: { Child } } </script> <style> div { text-align: center; } </style>
Child.vue:
<script> export default { beforeCreate() { console.log('子组件 beforeCreate') }, created() { console.log('子组件 created') }, render() { console.log('子组件 render') return ( <div> <h3>子组件</h3> </div> ) }, beforeMount() { console.log('子组件 beforeMount') }, mounted() { console.log('子组件 mounted') } } </script>
结果:父组件初始化 -> 父组件渲染完毕 -> 子组件初始化 -> 子组件挂载完毕 -> 父组件挂载完毕
子组件何时知道父组件已经挂载?
main.js:
Vue.prototype.$bus = new Vue()
Father.vue:
mounted() { console.log('父组件 mounted') this.$bus.$emit('fatherMounted') }
Child.vue:
mounted() { console.log('子组件 mounted') this.$bus.$on('fatherMounted', () => { console.log('父组件已挂载') }) }