Vue.js 완벽 가이드 - 라우팅 고도화

tags: 석기

---

Dynamic Routing

Next 에서 params 로 넘기는 로직 구현.

<template>
  <div>
    <user-profile :info="userInfo">
      <div slot="username">{{ userInfo.id }}</div>
      <span slot="time">{{ 'Joined ' + userInfo.created  }}, </span>
      <span slot="karma">{{ userInfo.karma }}</span>
    </user-profile>
  </div>
</template>

• user-profile 컴포넌트에 :info 를 통해 props를 넘겨준다.
• slot
  • slot 을 통해 react의 children 처럼 컴포넌트를 넘길 수 있다.
  • 여러가지를 slot 에 할당된 문자열 값을 통해 구분하여 렌더링 할 수 있다.