6の応用：親子アセンブリVueの間の3つの通信モード

（注：この記事は知識に記事を説明するために、読者の特定のVueの基盤や開発経験に適用され、必ずしも包括的ではありませんが、開発プロセスに非常に便利です）

　　コンポーネントは、 Vueがコア機能の一つ、だけでなく、開発プロセスでは、我々は多くの場合に使用します。どのように個々のデータ要素間の相互作用は、以下のは、開発プロセスの方法で使用される3人を記述する-

1、小道具および$ EMIT

　　親コンポーネント小道具は、サブアセンブリのようにデータを渡す;ことによってサブアセンブリ$ EMIT、親コンポーネントにV-に受信したデータバックホール方法。以下、次の例を考えてみましょう、

　　親コンポーネントの定義parent.vueは、次のコードを追加します。

<テンプレート> 
  の<divのid = "デモ"> 
    <子：メッセージgetInputValue = "getInputValue" @ = "メッセージ"> </子> 
  </ div> 
</テンプレート> 

の<script> 
からの輸入子供共通の「@ /コンポーネント/ /child.vue」; 
エクスポートデフォルト{ 
  名： 'デモ' 、
  コンポーネント：{ 
    子
  }、
  データ（）{ 
    リターン{ 
      メッセージ： 'こんにちは' 
    } 
  }、
  メソッド：{ 
    getInputValue（ヴァル）{ 
      この .message = ヴァル
      はconsole.log（本。
 </ SCRIPT>

　　定義されたサブアセンブリchild.vue、次のコードを追加します。

<テンプレート> 
  の<divのid = "子"> 
    <EL-入力Vモデル= "メッセージ"クリアプレースホルダ= "" @チェンジ= "handleChangeInput"> </ EL-入力> 
  </ div> 
</テンプレート> 

<スクリプト> 
輸出デフォルト{ 
  名： '子' 、
  小道具：{ 
    メッセージ：文字列
  }、
  メソッド：{ 
    handleChangeInput（ヴァル）{ 
      この。$（ 'getInputValue'を発し、ヴァルを）
    } 
  } 
}
 </ SCRIPT>

　　データは、サブアセンブリをアクセスし、親コンポーネント内で定義する場合、メッセージ、第一の結合サブアセンブリコンポーネントのデータが親タグ引用し、その後、小道具のサブアセンブリ、サブアセンブリに転送方法メッセージに対して行われた変更後$放出方法バック親要素に、親組立方法getInputValueを受信しに再割り当てメッセージ。

2は、サブアセンブリで定義され得ると設定方法

　　次の2つのコード片を見て、親コンポーネント定義parent.vueを、次のコードを追加します。

<テンプレート> 
  の<divのid = "デモ"> 
    <子REF = "childComponent"> </子供> <BR> 
    <EL-ボタンタイプ= "主" @ = "clickSet"をクリックしてください> </ EL-ボタン>設定
    <エル・ボタンタイプ= "主" @ = "clickGet"をクリック>取得</ EL-ボタン> 
  </ div> 
</テンプレート> 

の<script> 
からの輸入子供 '@ /コンポーネント/共通/ child.vue' ; 
輸出のデフォルト{ 
  名： 'デモ' 、
  コンポーネント：{ 
    子
  }、
  メソッド：{ 
    clickSet（）{ 
      この $ refs.childComponent.setMessage（ 'こんにちは世界。）; 
    }、
    clickGet（）{ 
      MSGせ =この。$ refs.childComponent.getMessage（）; 
      console.log（MSG）。
    } 
  } 
}
 </ SCRIPT>

　　定義されたサブアセンブリchild.vue、次のコードを追加します。

<テンプレート> 
  の<divのid = "子"> 
    <スパン> {{メッセージ}} </ span>を
  </ div> 
</テンプレート> 

<スクリプト> 
輸出デフォルト{ 
  名： '子' 、
  データ（）{ 
    リターン{ 
      メッセージ： 'こんにちは' 
    } 
  }、
  メソッド：{ 
    のgetMessage（）{ 
      戻り 、この.messageと、
    }、
    setMessage（ヴァル）{ 
      この .message = ヴァル。
    } 
  } 
}
 </ SCRIPT>

　　親要素は、サブアセンブリで定義されたデータにアクセスする場合は、メッセージをすることにより、$レフリーのアクセスサブアセンブリ定義された方法のgetMessageとsetMessage方法。

3、Vuex

　　vuexグローバルストレージデータの状態のための状態管理は、特定のアプリケーション以前を参照してください、「4つの応用：Vueの VUEXの状態管理」、これは詳細には説明しません。

6の応用：親子アセンブリVueの間の3つの通信モード

おすすめ