🌱 성장일지 8.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

• 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
• 성장하고 있는 것이 살아 있는 것이다.
• 생명의 유일한 증거는 성장이다!

⚛ (8.0)<완전 개편> 그 날의 키워드 중심으로 간단하게 정리하되 매일 꾸준히 작성할 수 있는 공간을 만들어보자.

Vue3 Options API

다른 공부 내용도 많지만, 오늘 아래 코드만 잘 이해한다면 대략적인 Vue3의 Options API를 이해한 것이라 생각한다.

<div id="app">
  <app-header v-bind:app-title="appTitle"></app-header>
  <app-contents v-on:login="receive"></app-contents>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const appHeader = {
    props: ['appTitle'],
    template: `<h1>{{appTitle}}</h1>`,
  };
  const appContents = {
    template: `
    <p>
      <button v-on:click='sendEvent'>로그인</button>
    </p>`,
    methods: {
      sendEvent() {
        this.$emit('login');
      },
    },
  };

  const App = {
    data() {
      return {
        appTitle: '로그인 하세요.',
      };
    },
    methods: {
      receive() {
        this.appTitle = '로그인 됨';
      },
    },
    components: {
      'app-header': appHeader,
      'app-contents': appContents,
    },
  };

  Vue.createApp(App).mount('#app');
</script>

data는 props로 전달하고 event는 emit으로 전달하는 방식이 생각보다 쉽지 않다. 아무래도 리액트에 익숙해져 있다보니 그런 것 같다. Options API가 불편하긴 하지만 추후에 Composition API를 공부하면서 더 편하기 위함이라고 생각하자.

📝 회고

하면 또 되게 재미있다. 허허... 요즘 책을 너무 안읽고 있는데, 책 좀 읽자!!!!!!(개발 서적말고 일반 교양 서적!!!)

참고

• Vue 3 - Options API