VUE 셀렉트박스(자식(component 제어) 폼 검색 영역 초기화

공통 사용되는 셀렉트 박스 (본창 or 부모창)
  

<template>
  <div>
	  <공통select></공통select>
  </div>

</template>
<script>
import 공통셀렉트 from '@/common/Selected'

export default {
  components: {
   공통셀렉트
  }
</script>  

  

검색 초기화 버튼 .. 

Object.assign(this.$data, this.$options.data())

으아 이건 전체가 데이터가 모두 바뀐다..

침착하자 ㅎㅎ

data:{
  indata:'요호1',
  indata2:'요호2',
  indata3:'요호3',
}
감싸고

Object.assign(this.data,this.$options.data().data)

로 부분 초기화 성공

 vue 자식 컴포넌트는 eventbus 전달

부모에게 데이터 전달 하기

// child.vue

import { eBus } from "/js/eBus"
methods: {
	부모에게전달() {
		eBus.$emit('전달키','전달변수 혹은 메세지')
	}
}

// parent.vue

import { eBus } from "/js/eBus"

export default {
  created() {
    // 선택된 하위 컴포넌트 이벤트 버스로 전달 받음
    eventBus.$on('전달키', 전달변수 혹은 메세지 => {
      console.log(JSON.stringify(전달변수 혹은 메세지))
    })
  },
}

반대 부모가 자식에게 전달

// parent.vue
import { eBus } from "/js/eBus"

methods: {
하위전달메서드() {
eBus.$emit( '하위전달키','변수 혹은 메세지') 
}
} 

// child.vue

  created() {
    eventBus.$on('하위전달키', res => {
console.log("부모가 전달한 변수 혹은 메세지", res)
    })
  }

  
eventbus 정리

vue 빈 객체 하나 생성 ( eventBus 객체)
전달하는곳은 $emit('key','message')
받는곳은    $on('key',message)
  
끝

하고 나니 참 쉽네.. 이게 왜케 이해가 안갔을까 ..

괜히 props 로 할려다가 생고생  eventBus 간단함 

vuex 를 쓰라고 권장하던데 공부할깨 참 많타 ㅠ^ㅠ