单独组件的生命相信大家都明白,但是当出现父子组件这种模式时,他们的生命周期又会出现什么问题呢?
父组件
<template>
<div>
<h3>我是父元素</h3>
<Son></Son>
</div>
</template>
<script>
import Son from '@/components/Son.vue'
export default {
name: 'App',
components: {
Son
},
beforeCreate() {
console.log('父元素---beforeCreate');
},
created() {
console.log('父元素---created');
},
beforeMount() {
console.log('父元素---beforeMount');
},
mounted() {
console.log('父元素---mounted');
}
}
</script>
子组件
<template>
<div>
<h3>我是子元素</h3>
</div>
</template>
<script>
export default {
name: 'Son',
beforeCreate() {
console.log('子元素---beforeCreate');
},
created() {
console.log('子元素---created');
},
beforeMount() {
console.log('子元素---beforeMount');
},
mounted() {
console.log('子元素---mounted');
}
}
</script>
打印结果: