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

prop : 부모가 자식에게 데이터를 넘길때 사용 <> 자식이 부모에게 보낼때는 emit(event)를 이용한다

 

https://v3.ko.vuejs.org/guide/component-props.html#prop-%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%B8

Props | Vue.js

 

 

컴포넌트 파일 만들기  (component 파일명은 대문자로 시작합니다)

src > components > my > TopMenuProps.vue 파일 생성   

 

TopMenuProps.vue

<template>
  <div>
    {{ title }}
    {{ link }}
  </div>
</template>

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

export default defineComponent({
  name: "TopMenuProps",
  props: {
    link: {
      type: String, //타입 설정 (props 옵션값)
      required: true, // 필수 사항으로 체크 (props 옵션값)
    },
    title: {
      type: String, //타입 설정 (props 옵션값)
      required: true, // 필수 사항으로 체크 (props 옵션값)
    },
  },
});
</script>

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

 

페이지에 컴포넌트 추가 하기

src > layouts > my > MyPage.vue 파일 생성

 

MyPage.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header>
      <TopMenuProps
        v-for="link in topMenuList"
        :key="link.title"
        v-bind="link"
      ></TopMenuProps>
    </q-header>
    
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { defineComponent } from "vue";
import TopMenuProps from "src/components/my/TopMenuProps.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: { TopMenuProps }, 

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

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

 

결과 확인

 

components_props.zip

0.20MB

 

vue 3 + quasar로 작업되었습니다