素子通信(props,emit)

各構成部品インスタンスには、それぞれのスキャンがあります.したがって、既定では、子構成部品は親構成部品のデータを直接参照することはできません.

vueコンポーネント通信方式

Vueは基本的な通信規則に従い、親から子にしかデータを転送できない.
親から子にpropsという特殊な属性を渡すことでデータをダウングレードし、子から親にかけてemitでイベントをアップグレードできます.

propsの使用

親コンポーネントから子コンポーネントにメッセージ属性を渡してみます.

<child message="안녕하세요!"></child>

Propsオプションを使用して

サブコンポーネントのpropsを受信することを明確に宣言します.

テンプレート内部ではpropsが使用されます.

Vue.component('child', {
  // props 정의
  props: ['message'],
  // props 사용
  template: '<span>{{ message }}</span>'
})

上記の方法は、動的バインドだけでなく、親データが変更されてもサブコンポーネントには適用されません.
ダイナミックバインドを行うには、v-bindプロパティを使用します.

<div>
  <input v-model="parentMsg">
  <child v-bind:message="parentMsg"></child>
</div>

v-bindはビューインスタンスデータをバインドするため、前例のように通常の文字列(「こんにちは!」JavaScript以外の式を使用することを忘れないでください.

props検証

サブコンポーネントが親コンポーネントから受信するpropsの要件を指定できます.文字列配列として定義するのではなく、検証要件を含むオブジェクトを使用します.

// 하위 컴포넌트

props: {
    // 문자열이며 기본값은 ''
    type: {
      type: String,
      default: '',
    },
    // 문자열이며 꼭 필요함
    value: {
      type: String,
      required: true,
    },
}

type

String

Number

Boolean

Function

Object

Array

Symbol

emit

子から親にデータを渡す場合は、励起イベントを使用して親構成部品に信号を送信できます.

サブコンポーネントで特定のイベントが発生した場合、イベントは親コンポーネントに送信されます.

// 하위 컴포넌트

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

親コンポーネントは、v−on呼び出し方法としてイベントを受信する.

// 상위 컴포넌트

<child v-on:이벤트명="메소드명"></child>