[Vue.js] Component

3696 ワード
vue.js テキストリンク

コンポーネントバー


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>
2021.06.10(NAVERショッピング2編)
システムのデフォルトのベルを閉じる