vue js 3 - props 메뉴 컴포넌트 만들기

https://godffs.tistory.com/3785

vue js 3 - props 자식 컴포넌트에 데이터 전달

 

prop 로 데이터를 넘겨서 컴포넌트로 메뉴를 만들었다

 

layouts \ myPage \ MyIndex.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header>
      // 메뉴 컴포넌트 만들기
      <TopMenuPropsItems :items="topMenuList"></TopMenuPropsItems>
    </q-header>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { defineComponent } from "vue";
import TopMenuDataBind from "src/components/my/TopMenuDataBind.vue"; // 자식 (컨포넌트) 선언

// 자식 (컨포넌트)에게 보낼 데이터
const dataTopMenuList = [
  { link: "/", title: "메인" },
  { link: "/menu1", title: "메뉴1" },
  { link: "/menu2", title: "메뉴2" },
  { link: "/menu3", title: "메뉴3" },
  { link: "/menu4", title: "메뉴4" },
];

export default defineComponent({
  name: "MyPage",

  //선언한 컨포넌트를 등록
  components: { TopMenuPropsItems },

  setup() {
    return {
      topMenuList: dataTopMenuList, // 자식한테 array로 데이터 전달
    };
  },
});
</script>

 

컴포넌트 파일 만들기

src \ components \ my \ TopMenuPropsItems.vue 파일 생성

 

TopMenuPropsItems.vue

<template>
  <nav id="topMenu">
    <ul>
      <li v-for="(item, idx) in items" :key="{ idx }">
        <a class="menuLink">{{ item.title }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "TopMenuProps",
  props: {
    items: { type: Array, default: () => [] }, //Array로 데이터 받음
  },
  setup() {},
});
</script>

<style lang="scss"></style>

 

결과

 

 

quasar-project-js.zip

0.20MB