[Vue.js] Component와 PROPS, EMIT

zyan·2021년 9월 29일
0

Web

목록 보기
4/7

🍋 Component란?

component는 기본 HTML element를 확장하여 재사용 할 수 있게 하는 '캡슐화'를 돕는다. Vue component는 Vue instance이기도 하며, 모든 옵션 객체 사용이 가능하다. (루트에만 사용하는 옵션은 제외한다.)


🟡 Component의 전역, 로컬 등록

  • 전역 등록
Vue.component('my-component', {
  // 옵션
})
  • 로컬 등록
new Vue({
  // ...
  components: {
    // <my-component> 는 상위 템플릿에서만 사용할 수 있다.
    'my-component': Child
  }
})

위와 같이 컴포넌트가 등록된 이후에는 커스텀 엘리먼트로 사용할 수 있다.

<div id="example">
  <my-component></my-component>
</div>

🍋 Component간 데이터 전달 : PROPS, EMIT

분리된 상태의 부모, 자식 컴포넌트간에 긴밀히 소통해야할 때가 있는데, 이 때 필요한 것이 component통신, 즉 props와 emit이다.

🟡 PROPS

부모에서 자식으로 데이터를 전달하기 위해 사용

  • 사용 예시
<!-- 상위 component template -->
<div id="app3">
  <btn-com3 v-bind:msg="m"></btn-com3>
</div>

<script>
  <!-- 하위 component -->
  Vue.component("btn-com3", {
  	template: '<button>{{msg}}</button>',
  	props: ['msg']
  })

  new Vue({
  	el: "#app3", 
  	data: {
  		m: "빙봉빙봉",
  		n: "zyanzyan"
  	}
  });
</script>

🚨 props는 반드시 배열로 받아야 함에 주의한다. 🚨


🟡 EMITS

자식이 부모에게 데이터를 전달하기 위해서 이벤트를 발생시키는 것

  • 사용 예시
<div id="app5">
  <child-com v-on:event-data1="viewData"></child-com>
  <child-com v-on:event-data2="viewData"></child-com>
  <child-com v-on:event-data2="viewData2"></child-com>
  <span>{{msg}}</span> - {{myname}}
</div>

<script>
  Vue.component('child-com', {
  	template: '<button v-on:click="showLog">데이터 보기</button>',
  	methods: {
  		showLog: function() {
  		//$emit(key, 전송데이터)
  		//key는 사용자정의 tag의 속성명으로 사용
  		this.$emit('event-data1', '자식이 부모에게 공유한 데이터');
  		this.$emit('event-data2', '하하 졸리다 ');
  		}
  	}
  })

  new Vue({
  	el: "#app5",
  	data: {
  		msg: "msg",
  		myname: "myname"
  	},
  	methods: {
  	//자식이 전송하는 데이터를 받기 위한 parameter선언 
  		viewData: function(v) {
 		this.msg = v;
  		},
  		viewData2: function(v) {
  		this.myname = this.myname + v;
  		}
  	}
  })
</script>

참고 https://im-designloper.tistory.com/16

0개의 댓글