Vue3에서 부모 컴포넌트에서 받아온 props를 넘겨줘야 하는 경우가 많다.
그런데 똑같은 props를 반복해서 넘겨줘야 하는 경우에는 코드 작성이 귀찮다.
아래를 보면 ChildComponent에 똑같은 props 전달문을 반복해서 쓰고 있다.
<script>
const props = defineProps({
props1,
props2,
props3,
props4,
props5
})
</script>
<template>
<ChildComponent
props1=props.props1,
props2=props.props2,
props3=props.props3,
props4=props.props4,
props5=props.props5,
title="컴포넌트1"
/>
<ChildComponent
props1=props.props1,
props2=props.props2,
props3=props.props3,
props4=props.props4,
props5=props.props5,
title="컴포넌트2"
/>
<ChildComponent
props1=props.props1,
props2=props.props2,
props3=props.props3,
props4=props.props4,
props5=props.props5,
title="컴포넌트3"
/>
</template>
그런 경우에 아래처럼 commonProps를 생성하여 v-bind로 넘겨주면 편하다.
<script>
const props = defineProps({
props1,
props2,
props3,
props4,
props5
})
// commonProps 생성
const commonProps = {
props1: props.props1,
props2: props.props2,
props3=props.props3,
props4=props.props4,
props5=props.props5
}
</script>
<template>
// v-bind로 commonProps를 넘겨줌
<ChildComponent
v-bind="commonProps"
title="컴포넌트1"
/>
<ChildComponent
v-bind="commonProps"
title="컴포넌트2"
/>
<ChildComponent
v-bind="commonProps"
title="컴포넌트3"
/>
</template>
아래의 changebleValue처럼 값이 달라지는 변수가 있는 경우에는 computed로 작성하면된다.
// commonProps 를 computed로 생성
const changableValue = ref()
const commonProps = computed (() => {
return {
props1: props.props1,
props2: props.props2,
props3: props.props3,
props4: props.props4,
props5: props.props5,
props6: changableValue.value }
})