Vue3.js (19) life cycle

Bada Jung·2022년 1월 10일
0

Vue

목록 보기
19/20
post-thumbnail

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>
profile
🌊🌊Under the SEA🌊🌊

0개의 댓글