Vue(6) 자식에서 부모컴포넌트로 emit 으로 데이터보내기

Vue.js 로 상담페이지에서 이미지 업로드기능을 완성하였다. 하지만 코드가 너무 길어 컴포넌트 파일로 따로 분리하였다. 결과적으로 간단한 몇 줄의 코드이지만 과정은 복잡했다.

(예기치 못한 지원업무가 생겨 너무 오랜만에 포스팅을 올렸다ㅠㅠ 분발해야지...) 

 

결과화면

+ 버튼을 누르면 파일 업로드 창이 열리고, 이미지를 업로드하면 미리보기 와 삭제가 된다. 

이미지 업로드 시, 부모님에게 잘 전달받은 이미지 객체가 아주 잘 보인다. (흡족) ☺️

스포이긴하지만 빠른 이해를 돕기위해 결과화면 먼저 보자

 

자식컴포넌트 ImageUpload.vue

-HTML 에서는

오리지널 코드를 심플하게 간추렸다.  + 버튼을 누르면 파일 업로드 창이 열리고, 이미지를 업로드하면 미리보기와 삭제가 된다. 

<div class="image-upload">
  // 이미지 업로드 버튼
  <button class="uplaod-button" @click="onUpload"> 
	<img :src="./assets/imgs/upload-input.png"/>
  </button>
  
  // 이미지 업로드 버튼을 누르면 uploadReady라는 변수가 true가 되면서 업로드기능이 활성화
  <input v-if="uploadReady" ref="files1" type="file" @change="onInputImage1" accept="image/*" style="display:none" />
  
  // 이미지 url이 있으면 (이미 업로드를 해서 url이 있다면 미리보기 기능이 보인다)
  <div v-if="imageUrl1"> 
	<img :src="imageUrl1" class="image-input" />  		// 이미지 미리보기
	<button class="close-button" @click="imageDelete1">	// 이미지 삭제 버튼
	  <img :src="./assets/imgs/upload-close.png" />
	</button>
  </div>
</div>

 

- data()에서는

이미지 파일을 주워 담을 배열을 명시해준다.

data() {
  return {
	inputFiles: []
  }
}

 

- Method() 에서는

파일 업로드 메소드 onInputImage() 를 통해 부모 컴포넌트에게 데이터를 올려 보낸다.

정확히는 this.$emit(‘이벤트이름’, 보낼데이터) 를 사용하면, 부모 컴포넌트 안의 <자식컴포넌트의 @이벤트> 에서 데이터가 전달이 된다.  

onInputImage(e) {
  // 선택한 이미지 파일을 'file' 변수에 담아 요리해보자
  const file = e.target.files[0]
  
  // 미리보기를 위해 url 생성
  this.imageUrl1 = URL.createObjectURL(file)
  
  // delete하기 위한 임시배열에 파일을 저장
  this.temp1 = file
  
  // 부모에 보낼 inputFiles 배열에 저어장하기
  this.inputFIles.push(file)
  
  // 부모컴포넌트의 child 라는 이벤트로 데이터를 담기 
  this.$emit('child', this.inputFiles)			
}

 

 

부모 컴포넌트 Servey.vue

- HTML 에서는

<자식컴포넌트 안에 @이벤트이름 = “함수이름”> 을 받는다.

그러면 @child 를 통해 받아온 자식 데이터를 구워삶을 parent() 라는 함수가 실행된다.

<ImageUpload @child="parents"/>
<p>이미지: {{ input.image }}</p>

 

- Data() 에서는

부모 데이터가 명시되어 있다. (데이터 담을 상자? 같은 준비물 개념이쥬)

data() {
  return {
	input: {
	  name: '',
	  company_name: '',
	  phone: '',
	  mail: '',
	  reservation: '',
	  require: '',
	  day: '',
	  time: '',
	  image: '',
	}
  }
}

 

- Methods 에서는

Parent()메소드는 인자로 자식이 전달한 InputFiles 를 받고 있다.

data()에서 정의한 Input 객체 안의 image 속성으로 인자로 받은 InputFiles 데이터를 넣어준다. 자식에서 부모로 데이터 넘기기 완료 !!! 

methods: {
  parents(inputFiles) {
	this.input.image = inputFiles 
  }
}