component 폴더에 liftcycle 폴더 생성
src/component/liftcycle/ParentComp.vue
src/component/liftcycle/ChildComp.vue
ParentComp.vue
<template>
<div>
<h1>Parent Component</h1>
<input type="text" v-model="nickname" ref="inputRef" />
<button @click="consoleRef">console Ref</button>
<hr />
<childcomponent v-if="showChild" />
<button @click="showChild = false">unmount child</button>
</div>
</template>
<script>
import childcomponent from "./ChildComp.vue";
export default {
components: { childcomponent },
name: "parentcomponent",
data() {
return {
showChild: true,
nickname: "",
};
},
methods: {
consoleRef() {
this.$refs.inputRef.focus();
this.$refs.inputRef.style.border = "1px solid red";
this.$refs.childcomponent.sayHello();
console.log(this.$refs.inputRef);
},
},
beforeCreate() {
console.log("parent before create");
},
created() {
console.log("parent created");
},
beforeMount() {
console.log("parent beforeMount");
},
mounted() {
console.log("parent mounted");
},
beforeUpdate() {
console.log("parent before update");
},
updated() {
console.log("parent updated");
},
beforeUnmount() {
console.log("parent before Unmount");
},
unmounted() {
console.log("parent unmounted");
},
};
</script>
<style></style>
ChildeComp.vue
<template>
<div>
<h1>Child Component</h1>
<input type="text" v-model="username" />
</div>
</template>
<script>
export default {
name: "childcomponent",
data() {
return {
username: "",
};
},
methods: {
sayHello() {
console.log("say hello");
},
},
beforeCreate() {
console.log("child before create");
},
created() {
console.log("child created");
},
beforeMount() {
console.log("child beforeMount");
},
mounted() {
console.log("child mounted");
},
beforeUpdate() {
console.log("child before update");
},
updated() {
console.log("child updated");
},
beforeUnmount() {
console.log("child before Unmount");
},
unmounted() {
console.log("child unmounted");
},
};
</script>
<style></style>
life cycle
app.vue
<template>
<div>
<!-- LifeCycle -->
<h1>Hello Vue!!</h1>
<parentcomponent />
</div>
</template>
<script>
import parentcomponent from "./components/liftcycle/ParentComp.vue";
export default {
name: "App",
components: { parentcomponent },
provide() {
return {};
},
data() {
return {
username: "bada",
};
},
methods: {},
directives: {},
computed: {},
watch: {},
};
</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>