Vue 父子组件挂载顺序

了解 Vue2.x 父子组件挂载的顺序是如何的

本篇文章将会通过父子组件小案例进行讲解。
组件并未通过template进行显示，而是通过render函数。

Parent.vue

<script>

import Child from './Child'
//import { render } from 'vue'
export default {
    beforeCreate(){
        console.log('parent beforeCreate')
    },
    created(){
        console.log('parent created')
    },
    beforeMount(){
        console.log('parent beforeMount')
    },
    mounted(){
        console.log('parent mounted')
        //this.$bus.$emit('parentMounted')
    },
    render(){
        console.log('parent render')
        return (
            <div>
                <h3>父组件</h3>
                <Child></Child>
            </div>
        )
    },
    components: {
        Child
},
}
</script>

Child.vue

<script>
import { render } from 'vue'
export default {
    beforeCreate(){
        console.log('child beforeCreate')
    },
    created(){
        console.log('child created')
    },
    beforeMount(){
        console.log('child beforeMount')
    },
    mounted(){
        console.log('child mounted')
    },
    render(h){
        console.log('child render')
        return (
            <div>
                <h3>子组件</h3>
            </div>
        )
    }
}
</script>

App.vue

<template>
<div id="app">
    <h1>Vue中父子组件挂载顺序</h1>
    <Parent></Parent>
</div>

</template>

<script>
import Parent from './components/Parent'
export default {
name: 'App',
components: {
    Parent
} 
}
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

结果显示如下图

根据打印出来的顺序，可以得知
父组件先初始化->父渲染完毕->子组件开始初始化->子组件渲染完毕->子组件挂载完毕->父组件挂载完毕
子组件如何得知父组件挂载完毕呢？
首先在main.js中，在Vue原型上面添加$bus方法

Vue.prototype.$bus = new Vue()

然后在子组件挂载完毕进行监听事件

mounted(){
    console.log('child mounted')
    this.$bus.$on('parentMounted',function(){
       console.log('父组件挂载完毕')
    })
},

最后在父组件挂载完毕时向外触发一个事件

mounted(){
    console.log('parent mounted')
    this.$bus.$emit('parentMounted')
},

• 本文作者： étoile

• 本文链接： http://sunnyllxx.github.io/2021/02/22/vue-parent-child-component-mount-order/

• 版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！

赏

谢谢你请我吃糖果

微信