컴포넌트에 props내리는법에 대해 질문
259
작성자 없음
작성한 질문수 0
컴포넌트에 props내릴때 질문 있습니다.
회사 프로젝트중에 팝업창을 띄울일이 있었고, 팝업창을 띄울때 데이터를 props로 넘겨줘야 할 일이 있어서
props로 넘겨줬습니다.
//팝업에 props로 데이터 넘겨주는 부분
<MNGDA0030Popup
ref="mNGDA0030Popup"
:cmpny-div="searchPopupParam.CMPNY_DIV"
:year="searchPopupParam.YEAR"
:asgn-full-nm="ASGN_FULL_NM"
:bsns-cd="searchPopupParam.BSNS_CD"
:asgn-cd="searchPopupParam.ASGN_CD"
:in-out="searchPopupParam.IN_OUT"
:seq="searchPopupParam.SEQ"
/>
//props 받는부분
const props = defineProps({
cmpnyDiv: {
type: String,
default: "",
},
year: {
type: String,
default: "",
},
asgnFullNm: {
type: String,
default: "",
},
bsnsCd: {
type: String,
default: "",
},
asgnCd: {
type: String,
default: "",
},
inOut: {
type: String,
default: "",
},
seq: {
type: Number,
default: "",
},
})let searchParams = reactive({
CMPNY_DIV: useUserStore.company,
YEAR: props.year,
BSNS_CD: props.bsnsCd,
ASGN_CD: props.asgnCd,
IN_OUT: props.inOut,
SEQ: props.seq,
})
console.log("프롭스", props)
console.log("서치파람", searchParams)제 질문은
console.log("프롭스", props)props를 콘솔 찍었을땐 값이 제대로 들어가는데,
searchParams에 따로 값을 할당해서 찍어보면 값이 들어가지 않습니다.
제 생각에는 props로 넘기고, 값을 할당했을때 반응성을 잃어 버린거 같습니다.
그래서 toRefs?로 감싸봤지만 해결하지는 못했습니다.
props.데이터 등으로 개발은 할수 있겠지만
searchParams에 props데이터를 할당 하는 방법이나 짐코딩님 강의중 어떤 부분을 다시 보면 될지 알수있을까요?
답변 1
0
안녕하세요 🙂
해결 방법이 다양할 것 같은데요. 우선 props 데이터가 비동기로 전달이 되는 것 같아요.
computed를 활용해도 좋을 것 같습니다.
const searchParams = reactive({
count: computed(() => props.counter),
});
// OR
const searchParams = computed(() => ({
count: props.counter,
}));
npm init vue@3.1.9
0
36
2
크롭 웹스토어 vue devtools 설치 관련
0
38
1
snippets 작성하는 부분 설명이 있었나요?
0
47
2
computed 의 set 함수를 통해 const 변수에 값을 담는 부분
0
52
2
소스 공유 어디서 해야하는지 궁금합니다
0
60
2
component 등록과 사용
0
57
2
강의교안
0
56
2
eslint 룰 관련 질문이 있습니다.
0
63
2
npm init -y 명령어 실행에 관한 질문
0
153
2
volar 가 마켓플레이스에 검색되지 않아 vue(official)을 설치했습니다.
0
167
2
깊은 감시자 질문
0
88
2
정리된 내용
0
153
2
화면이 왜 이렇게 뜨는걸까요?
0
184
2
왜 다르게 뜰까요..?ㅠㅠ
0
155
2
npm init vue , npm create vue@latest 명령 오류
0
289
2
강의를 듣다보니 궁금한 점 질문드립니다.
0
141
2
watch강의 질문
0
153
1
강의 듣다가 질문드립니다.
0
119
1
이벤트 처리 부분 강의 실습
0
140
2
v-pre는 설명이 없나요?
0
152
2
AppCard.vue 만들다 말고 오류가 갑자기 엄청 뜹니다
0
146
1
개발자도구 Vue 탭 관련 문의
0
240
2
강의를 인텔리제이로 수업따라가도 되져?
0
177
2
API 사용시 자동으로 import하는 기능은 어떤것을 설치해야 하나요?
3
273
2





