[Vue] 컴포넌트 간 파라미터 전달 방법 정리

이직한 회사에서 Vue 프레임워크로 프로젝트를 진행하게 되었다

진행하면서 느낀 것이 리액트와 문법적으로 차이가 있는 편이지만, 

기존에 이미 프론트 프레임워크를 접해본 분이라면 난이도가 높은 편은 아닌 것 같다.

 

해당 포스팅에서는 Vue 페이지 간 파라미터를 넘겨주는 방법을 정리하려고 한다.

 

 

▶부모 컴포넌트 → 자식 컴포넌트

 

→ 부모 컴포넌트 코드

index.vue


<script setup>
    const id = ref(1);
    const obj = ref({'a':1,'b':2});
    const text = ref("apple");
    const arr = ref([0,1,2]);
    
    const func = () => {
    	console.log("함수실행");
}
</script>
<template>
	<div>
		<자식컴포넌트
                  :id="id"
                  :obj="obj"
                  :text="text"
                  :arr="arr"
                  :func="func"
          	/>
    	</div>
</template>

 

→ 자식 컴포넌트 코드

<script setup>
const props = defineProps({
  shmsId : {
    type : String,
    required : true,
  },
  id : {
      type : Number,
      required : true,
  },
  text : {
      type : String,
      required : true,
  },
  obj : {
      type : Object,
      required : true,
  },
  arr : {
      type : Array,
      required : true,
  },
  func : {
      type : Function,
      required : true,
  }
});

const test = () => {
    console.log("id [Number] : " +props.id);
    console.log("text [String] : " +props.text);
    console.log("obj [Object] : " +props.obj);
    console.log("obj [Object] 키 값 a : " +props.obj.a)
    console.log("arr [Array] : " +props.arr);
    props.func();
}


watchEffect(test)
</script>

위와 같이 간단히 부모 컴포넌트에서 전달한 값을 자식 컴포넌트가 넘겨 받을 수 있다.

 

defineProps 는 굳이 사용하지 않고, props = [ id ] 형태로 전달 받을 수 있지만, 넘겨 받을 파라미터를 정의해두고 사용하는 것이 추후에 코드를 볼 때 편한 것 같다.

 

type : 파라미터 형태

 

required : 필수 여부 ( true / false )

 

자식 컴포넌트에서 watchEffect 함수를 통해 컴포넌트가 렌더링 될 때, test 함수를 실행시킨 결과는 아래와 같다. 

 

숫자형 문자형은 물론이고, 객체 키 값을 통한 값 접근, 부모 함수인 func 함수의 실행결과까지 모두 로그가 남아있다.

 

props 객체는 읽기 전용 데이터기 때문에, 해당 값의 조작이 필요하다면

[ref] 속성을 통해 해당 컴포넌트에서 값을 받아서 쓰자 !

 

 

▶자식 컴포넌트 → 부모 컴포넌트

 

→ 자식 컴포넌트 코드

<template>
  <div>
  	<v-btn @click="$emit('parentCall', '안녕하세요!')">
        	함수
    	</v-btn>
  </div>
</template>

 

→ 부모 컴포넌트 코드

 

<script setup>
const parentFunc = (text) => {
    console.log(text);
}
</script>
<template>
	<div>
            <자식컴포넌트
              :id="id"
              :obj="obj"
              :text="text"
              :arr="arr"
              :func="func"
              @parentCall="parentFunc"/>
    </div>
</template>

 

자식 컴포넌트에서 부모를 호출할 때는 $emit 이라는 vue 내장함수를 사용한다.

해당 함수는 내가 생성한 이벤트를 부모함수에 넘겨주는 역할을 하게 된다.

 

이벤트가 발생했을 때, 부모 함수에서는 parentFunc 함수가 실행되면서 $emit 함수의 아규먼트가 로그로 찍힌다.

아래는 다음의 결과다.

 

 

부모 컴포넌트와 자식 컴포넌트 사이에서 데이터를 주고 받는 기초적인 방법을 포스팅했다