hands on vue3 - component 태그 이해하고 연습문제로 연습하기

[목표]

1. component 태그에 대한 이해를 한다. 이해를 바탕으로 연습문제를 풀어본다.

 

첫번째로는 component 태그를 사용하지 않고 연습문제를 풀어본다.

두번째로는 component 태그를 사용하여 연습문제를 풀어본다.

 

문제는 다음과 같다

 

버튼 두 개가 있다.

하나씩 누를 때 마다 밑에 텍스트가 나오게 한다.

 

다음은 첫번째 버튼을 누를 때

 

다음은 두번째 버튼을 누를 때

---

[component태그를 사용하지 않고 풀어보기]

[App.vue]

<template>
  <div>
    <the-header></the-header>
    <!-- <badge-list></badge-list>
    <user-info
      :full-name="activeUser.name"
      :info-text="activeUser.description"
      :role="activeUser.role"
    ></user-info>
    <course-goals>
      <template #default="goalUsingInApp">
        <h2>
          {{goalUsingInApp.goal}}은 Parent에서 작성한 것이다.
        </h2>
      </template>
    </course-goals> -->
    <button @click="setComponent('activeGoals')">Show Active Goals</button>
    <button @click="setComponent('manageGoals')">Show Manage Goals</button>
    <active-goals v-if="isActive == true"></active-goals>
    <manage-goals v-if="isManage == true"></manage-goals>
  </div>
</template>

<script>
import TheHeader from './components/TheHeader.vue';
// import UserInfo from './components/UserInfo.vue';
// import BadgeList from './components/BadgeList.vue';
// import CourseGoals from './components/CourseGoals.vue';
import ActiveGoals from './components/ActiveGoals.vue';
import ManageGoals from './components/ManageGoals.vue';

export default {
  components: {
    TheHeader: TheHeader, //TheHeader -> the-header 로 vue가 알아서 변경해줌. 라인3번보면 케밥케이스로 되어있는데 잘못된 게 아님!
    // UserInfo: UserInfo,
    // BadgeList: BadgeList,
    // CourseGoals:CourseGoals,
    ManageGoals:ManageGoals,
    ActiveGoals:ActiveGoals,
  },
  data() {
    return {
      activeUser: {
        name: 'Maximilian Schwarzmüller',
        description: 'Site owner and admin',
        role: 'admin',
      },
      isManage: false,
      isActive: false,
    };
  },
  methods: {
    setComponent(cmt){
      console.log("1");

      if(cmt == 'manageGoals'){     
        this.isManage = !this.isManage;
        this.isActive = false;
      }

       if(cmt == 'activeGoals'){    
         this.isActive = !this.isActive;
         this.isManage = false;
       }
    }
  }
};
</script>

<style>
html {
  font-family: sans-serif;
}

body {
  margin: 0;
}
</style>

[ManageGoals.vue]

<template>
  <h2>Manage Goals</h2>
</template>

<script>
export default {

}
</script>

<style>

</style>

[ActiveGoals.vue]

<template>
  <h2>Active Goals</h2>
</template>

<script>
export default {

}
</script>

<style>

</style>

[main.js]

import { createApp } from 'vue';

import App from './App.vue';
import BaseBadge from './components/BaseBadge.vue';
import BaseCard from './components/BaseCard.vue';

const app = createApp(App);

app.component('base-badge', BaseBadge);
app.component('base-card', BaseCard);
app.mount('#app');

---

Component를 사용하여 나타내보자

app.vue 내용만 바뀜

[App.vue]

<template>
  <div>
    <the-header></the-header>
    <!-- <badge-list></badge-list>
    <user-info
      :full-name="activeUser.name"
      :info-text="activeUser.description"
      :role="activeUser.role"
    ></user-info>
    <course-goals>
      <template #default="goalUsingInApp">
        <h2>
          {{goalUsingInApp.goal}}은 Parent에서 작성한 것이다.
        </h2>
      </template>
    </course-goals> -->
    
    <button @click="setComponent('ActiveGoals')">Show Active Goals</button>
    <button @click="setComponent('ManageGoals')">Show Manage Goals</button>
    <component v-bind:is="activeComponent"></component>

    <!-- <active-goals v-if="isActive == true"></active-goals> -->
    <!-- <manage-goals v-if="isManage == true"></manage-goals> -->
  </div>
</template>

<script>
import TheHeader from './components/TheHeader.vue';
// import UserInfo from './components/UserInfo.vue';
// import BadgeList from './components/BadgeList.vue';
// import CourseGoals from './components/CourseGoals.vue';
import ActiveGoals from './components/ActiveGoals.vue';
import ManageGoals from './components/ManageGoals.vue';

export default {
  components: {
    TheHeader: TheHeader, //TheHeader -> the-header 로 vue가 알아서 변경해줌. 라인3번보면 케밥케이스로 되어있는데 잘못된 게 아님!
    // UserInfo: UserInfo,
    // BadgeList: BadgeList,
    // CourseGoals:CourseGoals,
    ManageGoals:ManageGoals,
    ActiveGoals:ActiveGoals,
  },
  data() {
    return {
      activeUser: {
        name: 'Maximilian Schwarzmüller',
        description: 'Site owner and admin',
        role: 'admin',
      },
      isManage: false,
      isActive: false,
      activeComponent: '',
    };
  },
  methods: {
    setComponent(cmt){
      this.activeComponent = cmt;
    }
  }
};
</script>

<style>
html {
  font-family: sans-serif;
}

body {
  margin: 0;
}
</style>