자식 컴포넌트에서 부모 컴포넌트 메서드 실행시키기

keep_going·2023년 5월 24일
0

문제해결

목록 보기
34/36

모달창 열고 닫을때 필요

// 자식 template
<div class="d-flex justify-content-center mt-5">
  	<button type="button" class="green_button btn mx-1" @click="submit()">등록</button>
	<button type="button" class="green_button btn" @click="$emit('close')">닫기</button>
</div>

// 자식 script
export default {
    emits: ['close', 'reload'],
    props : {
        member : {
            type : Object,
            required : true
        },
    },
    setup(props, { emit }) {
        const state = reactive({
            member: props.member,
            account: {}
        })

        const submit = async () => {
            axios.post(`/api/add/account/${state.member.memberNumber}`, state.account).then((res)=>{
                console.log(res);
                alert("계좌 등록 완료");
                emit('reload'); 
                emit('close');
            }).catch((err)=>{
                console.error(err);
                alert("등록 실패");
            })
        }

        return { 
            state, 
            submit 
        };
    }
}
// 부모 template
<account-add-modal v-if="showAccountAdd" :member="state.member" @close="showAccountAdd = false" @reload="handleReload"/>

// 부모 script
components: {
  AccountAddModal
},
setup () {
  const showAccountAdd = ref(false);
  
  // 계좌, 카드 등록 후 업데이트
  const handleReload = () => {
    handleMember();
  };
  
  // 중략
  
  return {
    state,
    showAccountAdd,
    handleReload
  }
}
profile
keep going

0개의 댓글