首先创建子组件
<template>
<div>
<span>我是子组件</span>
</div>
</template>
<script>
export default {
name: "Children",
data() {
return {
}
},
beforeCreate() {
console.log("子组件beforeCreate")
},
created() {
console.log("子组件created")
},
beforeMount() {
console.log("子组件beforeMount")
},
mounted() {
console.log("子组件mounted")
},
beforeUpdate() {
console.log("子组件beforeUpdate")
},
updated() {
console.log("子组件updated")
},
beforeDestroy() {
console.log("子组件beforeDestroy")
},
destroyed() {
console.log("子组件destroyed")
}
}
</script>
将子组件引入在父组件中使用
<template>
<div>
<children></children>
</div>
</template>
<script>
import children from "./Children"
export default {
name: '',
components: { children },
data () {
return {
}
},
beforeCreate() {
console.log("父组件beforeCreate")
},
created() {
console.log("父组件created")
},
beforeMount() {
console.log("父组件beforeMount")
},
mounted() {
console.log("父组件mounted")
},
beforeUpdate() {
console.log("父组件beforeUpdate")
},
updated() {
console.log("父组件updated")
},
beforeDestroy() {
console.log("父组件beforeDestroy")
},
destroyed() {
console.log("父组件destroyed")
},
methods: {}
}
</script>
查看控制台钩子函数加载顺序