[Vue.js] Component

コンポーネントバー

HTMLページを拡張して再利用可能な形で実現する、Vue.jsで使用される各コンポーネントはVueです.jsの例でもあります.

グローバル登録グローバル登録

グローバル登録では、すべてのサブコンポーネントが使用できます.構成部品を作成したmain.次のように、jsファイルにグローバルコンポーネントを登録する必要があります.

Vue.component(component.name, component)

地域登録ローカル登録

これは全境登録よりも多く、一般的に使われている方法です.グローバル登録とは異なり、サブコンポーネントは自動的に使用できません.使用する親コンポーネントのスクリプトラベルに次のフォーマットのコードを挿入するだけです.

import component이름 from 'component위치'
export default {
  components: {
    component 이름
  }
}

コンポーネント通信

コンポーネントは親-子関係で構成され、データの転送時に親から子へprops、子から親へイベントを介してデータが転送されます.

親->サブアセンブリデータ転送時のProps

親から子にデータを渡すときに使用するプロパティを、子のプロパティで定義します.props方式では値を変更できません.

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

親コンポーネントのHTMLコードで定義されているchild-componentラベルでv-bindプロパティを定義します.

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

子->親コンポーネントのデータを渡すイベント

サブコンポーネントでイベントを励起し、親コンポーネントに信号を送信する方法.

//이벤트 발생
this.$emit('이벤트명');
//이벤트 수신
<child-component v-on:이벤트명="상위 컴포넌트의 메소드명"></child-component>