Vue Single Root Component

<template>
  <ul>
    <NavBarRoutes :routes="persistentNavRoutes"/>
    <NavBarRoutes 
      v-if="logedIn"
      :routes="persistentNavRoutes"
    />
    <NavBarRoutes
      v-else
      :routes="persistentNavRoutes"
    />
  </ul>
</template>

[NavBarRoutes component]

export default {
  functional: true,
  render(h, {props}) {
    return props.routes.map(route =>
      <li key={route.name}>
        <router-link to={route}>
          {route.title}
        </route-link>
      </li>
    )
  }
}

[Vuejs] 숨겨진 Vue 패턴들

template 안에 root element 가 하나 있어야만 하는데, 사실 가끔 이게 불필요하게 느껴진다. 괜히 div로 감싸기도 좀 찝찝했는데, functional component 를 이용해서 처리하는 방법이 있다. 주의 할 부분은 @focus 부분에 .native를 붙이지 말아야 한다. (자식 컴포넌트에서 $listeners 로 전달 받지 못한다)...

https://dongmin-jang.medium.com/vuejs-%EC%88%A8%EA%B2%A8%EC%A7%84-vue-%ED%8C%A8%ED%84%B4%EB%93%A4-1ea3adc585ac