컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수도 있습니다.
Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다
전역 등록
컴포넌트는 부모-자식 관계에서 가장 일반적으로 함께 사용하기 위한 것입니다. 컴포넌트 A는 자체 템플릿에서 컴포넌트 B를 사용할 수 있습니다. 그들은 필연적으로 서로 의사 소통이 필요합니다. 부모는 자식에게 데이터를 전달해야 할 수도 있으며, 자식은 자신에게 일어난 일을 부모에게 알릴 필요가 있습니다. 그러나 부모와 자식이 명확하게 정의된 인터페이스를 통해 가능한한 분리된 상태로 유지하는 것도 매우 중요합니다. 이렇게하면 각 컴포넌트의 코드를 상대적으로 격리 할 수 있도록 작성하고 추론할 수 있으므로 유지 관리가 쉽고 잠재적으로 쉽게 재사용 할 수 있습니다.
app.js 파일에 전역으로 컴포넌트를 생성해준다.
Vue.component("greeting", {
template: "<p>Hey, im a greeting component</p>"
});html 파일에서 컴포넌트를 사용할 수 있다.
<div id="vue-app-one">
<h2>{{title}}</h2>
<greeting></greeting> // 사용
</div>
단방향 데이터 흐름
모든 props는 하위 속성과 상위 속성 사이의 단방향 바인딩을 형성한다. 상위 속성이 업데이트되면 하위로 흐르게 되지만 그 반대는 안된다. 이렇게하면 하위 컴포넌트가 실수로 부모의 상태를 변경하여 앱의 데이터 흐름을 추론하기 더 어렵게 만드는 것을 방지할 수 있다.
일반적으로 prop을 변경시키고 싶은 유혹을 불러 일으킬 수있는 두 가지 경우가 있다.
-
prop는 초기 값을 전달 하는데만 사용되며 하위 컴포넌트는 이후에 이를 로컬 데이터 속성으로 사용하기만 한다.
-
prop는 변경되어야 할 원시 값으로 전달된다.
Vue.js에서 부모-자식 컴포넌트 관계는 props는 아래로, events 위로 라고 요약 할 수 있습니다. 부모는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모에게 메시지를 보냅니다.
Refs
소품과 이벤트가 있음에도 불구하고 때로는 JavaScript에서 하위 구성 요소에 직접 액세스해야 할 수도 있습니다. 이를 위해 ref속성을 사용하여 하위 구성 요소에 참조 ID를 지정할 수 있습니다 .
index.html
<div id="vue-app">
<h1>Refs</h1>
<input type="text" ref="input">
<button v-on:click="readRefs">Submit</button>
<p>Your fav food = {{output}}</p>
</div>이것을 정의한 컴포넌트에서 ref를 사용할 수 있다.
app.js
new Vue({
el: "#vue-app",
data: {
output: "Your fav food"
},
methods: {
readRefs: function() {
this.output = this.$refs.input.value;
}
}
});
React에서는 input의 value 값을 useState를 사용해 바뀌는 값을 가져오는데 Vue에서는 $ref를 사용해 조금 더 간편한 방식으로 값을 사용할 수 있는 것 같다.
