props으로 함수 받기

🦞 props 으로 함수 받기 글을 쓰게 된 이유

개발을 하다보면 여러개의 모달을 만드는 경우가 있다. 그렇지만 대부분의 모달은 "예,아니오" 또는 경고성  모달을 만드는 경우가 많다. 그리고 한 화면에 3~4개의 모달이 필요한 경우도 있다. 그렇다면, 한 화면에 3~4개의 모달을 import해야 하는 경우도 발생하는데, 이러한 부분이 자원낭비라고 생각했다. 그리하여 만약 모달의 구조는 같으나, 선택된 버튼의 경우에 따라 동작 방식이 다르다면 props으로 Function으로 받으면 되지 않는가 라는 생각이 들어서 이번글을 적게 되었다.

 

아래 모달1,모달2는 구조는 같으나 

 

🦎 Props으로 함수 받기

일단 props으로 closefunc으로 받도록 한다. 그리고 type을 Function으로 선언하고 기본적으로 'Default function'으로 받도록 한다.

 

props: {
	closefunc: {
      type: Function,
      default() {
        return 'Default function'
      }
    }
}

🐠 부모컴퍼넌트에서 props으로 받을 data 선언

일단 자식컴퍼넌트에 전달할 데이터를 선언해준다.

title,contents,modalCallback을 선언해준다. modalCallback이 자식 컴퍼넌트에게 전달할 함수이다.

data() {
	modalData: {
        title: "",
        contents: "",
        modalCallback: () => {
          console.log("default modalCallback");
        },
      }
}

🦧 선택된 버튼에 따라 modalData 값 바꿔주기

onCloseModal1,onCloseModal2는 같은 모달을 공유하면서 , 버튼 기능이 다른 함수이다.

그리고 modalClick1,modalClick2는 모달1,2의 클릭했을 때의 함수이며, modalCallBack에 onCloseModal1,onCloseModal2를 전달 한 것을 볼 수 있다.

methods: {
 	onCloseModal1() {
      alert("onClose1")
    },
    onCloseModal2() {
      alert("onClose2")
    },
	modalClick1() {
      this.modalData = {
        title: "제목1",
        contents: "본문내용",
        modalCallback: this.onCloseModal1
      }
	  //모달보여주기 data
      this.modalVisible = true;
    },
    modalClick2() {
      this.modalData = {
        title: "제목2",
        contents: "본문내용2",
        modalCallback: this.onCloseModal2
      }
      //모달보여주기 data
      this.modalVisible = true;
    }
}

 

🐃  부모에서 받은 함수 호출해주기

부모컴퍼넌트에서 받은 closefunc를 버튼을 클릭했을 때 호출한다.

props: {
closefunc: {
      type: Function,
      default() {
        return 'Default function'
      }
    }
},
methods: {
    close() {
      this.$emit("onclose");
      this.closefunc();
    }
  },

각각 closefunc에 전달한 함수들이 뜨는 것을 알 수 있다.