SCB developer blog

develop in windows

0%

vue3 props, vue3 props 사용법, vue props function, vue props 전달, vue3 props ref, defineProps, script setup props

Posted on Edited on In Disqus:

vue

vue.js Props란?, vuejs props란?

vue에서의 props란 data를 부모 component에서 자식 component로 데이터를 전달하기 위한 방식입니다.

아래와 같이 두 개의 component로 이뤄진 component가 있다고 칩시다.
component1과 component2는 자식 component라 하고, 이 둘을 포함한 component는 부모 component입니다.
부모 component에서 자식 component로 데이터를 전달하기 위한 방법이 props가 있는 것이며,
props를 이용하면 부모 component에서 값을 변경하는 코드를 한번만 작성하면 여러개의 component에서 사용하는 값을 동시에 바꿀 수 있습니다.

component1
component2

vue3 Props 사용법, vuejs props 예제코드, props 사용방법

parent component : Parent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
 <Child1 :data="data" />
 <Child2 :data="data" />
</template>

<script>
import {ref, provide} from 'vue'
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

export default {
    components: { 
        Child1, 
        Child2, 
 }, 
 setup(){
  const data = ref('data');
  return{
   data
  }
 }
}

</script>

child component1 : Child1.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
 <div style="background-color:#fefe00;height:50px;"> 아이디 : <input type="text" :value="data"/></div>
</template>
<script>
export default  {
    props:{
        'data':{
            type:String,
            default:'test'
        }
    }
}
</script>

child component2 : Child2.vue

1
2
3
4
5
6
7
8
<template>
 <div style="border:1px solid black;background-color:#fefefe;">{{data}} 는 사용할 수 있습니다. </div>
</template>
<script>
export default  {
    props:['data']
}
</script>

파일구조는 아래와 같습니다.
structure

이렇게 작성하고 실행을 하고, Child1쪽에 있는 input에 text를 바꿔보면 Child2의 text도 바뀌는것을 확인할 수 있습니다.

그리고, Child1과 Child2 코드를 보면 알 수 있듯이, 자식 component에서 props를 정의하는 방식은 아래와 같이 여러 방식이 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//기본 모양
<script>
export default  {
    props:['data']
}
</script>

//type과 default값을 지정하고 싶다면 아래와 같이 쓸 수 있습니다.
<script>
export default  {
 props:{
  'data':{
   type:string,
   default:'test'
  }
 }
}
</script>
 
//script setup  스타일에서는 defineProps를 사용하여 props 를 지정할 수 있습니다.
<script setup>
const props = defineProps(['data'])
</script>

vue props function

props를 이용하여 function 또한 넘겨줄 수 있습니다.

예제코드는 아래와 같습니다.

Parent.vue

1
2
3
4
5
6
7
8
9
<template>
  <ChildComponent :method="parentMethod" />
</template>

<script setup>
const parentMethod = (valueFromChild) => {
  console.log(valueFromChild);
}
</script>

Child.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
 <button @click="props.method(msg)">click</button>
</template>
<script setup>
import { ref } from 'vue';

const props = defineProps({
  method: {
    type: Function,
  }
});
const msg = ref('child msg');
</script>