상위에서 하위컴포넌트로 데이터 전달( 동적 props)
props를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있다.
//하위 컴포넌트 detail.vue
<script>
export default {
props: ['넘어올 변수명'], //부모가 보내준 데이터를 저장할 변수
//아래 상위컴포넌트에선 seq란 이름으로 넘기기때문에 "props: ['seq']"
//넘어올 변수가 여러개일경우 props: ['변수1', '변수2']
data() {
return {
}
}
}
</script>
//상위 컴포넌트 contractDetail.vue
<template>
<div class="components-container">
<Detail :seq="seq" />
<!-- 위에 있는 하위 컴포넌트에게 :하위컴포넌트에게 보낼 변수명="데이터를 담은 변수명" -->
<!-- 넘길 변수가 여러개일 경우
<Detail :contract_seq="contract_seq" :customer_seq="customer_seq" /> -->
</div>
</template>
<script>
import Detail from '@/components/Menu/contract/detail.vue'
export default {
components: { Detail },
props: ['seq'], //해당 변수명은 아래의 router를 통해 넘어온 props 값
data(){
return{
}
}
}
</script>
//contractDetail에게 보내는 상위 컴포넌트
//list.vue
this.$router.push({ name: 'contract_detail', path: 'contractDetail', params: { seq: seq }})
$router.push를 사용하여 router로 parmas의 값을 던진다.
//contract.js router 파일
{
path: 'contractDetail/:seq',
hidden: true,
component: () => import('@/views/menu/contract/contractDetail'),
name: 'contract_detail',
meta: { title: '계약 상세정보' },
props: true
}