[Vue]Vue素子

構成部品とは
スクリーン領域をリサイクル可能に管理
→スクリーンに組み合わせることができるブロック
構成部品は、事前定義されたオプションのあるインスタンスの拡張です.
すなわち、「構成部品はインスタンスです.」そうだ!
構成部品の登録
構成部品を登録する方法には、グローバルとゾーンの2つがあります.
グローバル構成部品
複数のインスタンスで使用できます.

Vue.component('컴포넌트명',{
	//컴포넌트 내용
});

コンポーネント名:テンプレート属性用HTMLカスタムタグ名、

を表す.

コンポーネント内容:

を定義できます.コンポーネントラベルを作成して実際の画面のHTML要素に変換するときに表示される属性→インスタンスオプション属性
ゾーン構成部品
特定のインスタンスでのみ有効です.

new Vue({
	components : {
    	'컴포넌트 명' : 컴포넌트 내용
    }
});

ゾーン構成部品は、インスタンスにコンポーネント属性を追加し、登録する構成部品名と内容を定義するだけです.
グローバル構成部品は、インスタンスを作成するたびにインスタンスのコンポーネントプロパティとして登録することなく、一度登録するだけで任意のインスタンスで使用できます.ゾーン構成部品は、新しいインスタンスが作成されるたびに登録する必要があります.
データ転送
Vueのデータ転送方法は、親(親)-子(子)コンポーネント間のデータ転送方法です.
親から子にはpropsプロパティのみ、子から親には基本イベントのみが渡されます.
propsでデータを渡す

Vue.component('child-component',{
	props : ['props 속성명']
});

<child-component v-bind:props의 속성명 = "상위 컴포넌트의 data 속성"></child-component>

emitによるイベントの励起

//이벤트 발생
this.$emit('이벤트명');

<!-- 이벤트 수신 -->
<child-component v-on:이벤트명="상위 컴포넌트 메세지명"></child-component>

참고 링크

- [https://dahye-jeong.gitbook.io/vue-js/vuejs/2019-10-15-instance](https://dahye-jeong.gitbook.io/vue-js/vuejs/2019-10-15-instance)
- [https://kadamon.tistory.com/13](https://kadamon.tistory.com/13)
- [https://www.bottlehs.com/vue/vue-js-인스턴스-&-컴포넌트-소개/](https://www.bottlehs.com/vue/vue-js-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-&-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%86%8C%EA%B0%9C/)
- [https://v3.ko.vuejs.org/guide/instance.html#라이프사이클-다이어그램](https://v3.ko.vuejs.org/guide/instance.html#%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B3%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8F%E1%85%B3%E1%86%AF-%E1%84%83%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%84%80%E1%85%B3%E1%84%85%E1%85%A2%E1%86%B7)