<!--
<template>
<Main class="cccc"/>
<component-a/>
<slot-demo>
<template #header="slotProps">
<p>插槽标题-{{slotProps.msg}}</p>
</template>
<template v-slot:low>
<p>插槽内容</p>
</template>
</slot-demo>
</template>
<script>
import Main from "@/components/Main.vue";
import ComponentA from "@/components/ComponentA.vue";
import SlotDemo from "@/components/SlotDemo.vue";
export default {
components: {SlotDemo, ComponentA, Main}
}
</script>
<style>
</style>
-->
<template>
<!--
* 生命周期函数
创建期：beforeCreate created
挂载期：beforeMounted mounted
更新期：beforeUpdate updated
销毁期：beforeUnmount unmounted
-->
</template>
<script>
export default {
data(){
return{
}
},
beforeCreate(){
console.log("组件创建之前")
},
created(){
console.log("组件创建之后")
},
beforeMount() {
console.log("组件渲染之前")
},
mounted() {
console.log("组件渲染之后")
},
beforeUpdate() {
console.log("组件更新之前")
},
updated() {
console.log("组件更新之后")
},
beforeUnmount() {
console.log("组件销毁之前")
},
unmounted() {
console.log("组件销毁之后")
}
}
</script>
一开始进行四个进程 数据更新后执行两个