VUEの研究ノート(V) - 通信コンポーネント

息子コンポーネントはVUE上で通信します

著者:フォックスの魚ハウス

このリンク:VUEのコンポーネントが通信

GitHubの:sueRimn

コンポーネントは、単一のページがある場合は、コンポーネント間の親子関係があり、あなたは親子アプローチの状態に応じて、異なるデータ転送を使用する必要があります。

新しい電子-VUEプロジェクトで説明するには、2つのコンポーネントが付属しています。

次のようにディレクトリ構造は次のとおりです。

前記親コンポーネントLandingPage.vue、SystemInformation.vueサブアセンブリ。

親コンポーネントは、サブアセンブリにデータを渡します

データは、小道具を介して親コンポーネントサブアセンブリに渡すことができます。

サブコンポーネント

 親コンポーネントへのデータの取得から表示サブアセンブリNEWNAMENEWPWD使用して、小道具を。

 親コンポーネント:

コンポーネントを呼び出す代わりに使用V-バインドサブアセンブリデータ名表示するには、親コンポーネントで定義されたバインド変数NEWNAME、NEWPWDを。

その後、データは、親コンポーネントの転送もサブアセンブリ内に表示することができます。

第二に、データは、親サブアセンブリの構成要素に伝達されます。

サブアセンブリ$が発する親コンポーネントのイベントへのパスデータを。

サブコンポーネント:

データサブコンポーネントのユーザ名によって、変更イベントメソッドを呼び出します)(SETUSERを、トリガー$発し、その後、イベント、カスタムイベントとはの親コンポーネントに送らchangeName

 親コンポーネント:

父组件的changeName事件调用getUser方法,获取从子组件传递的参数username

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username。


以下动图中,输入框与welcome是属于子组件,嵌套在父组件中,输入框输入值,传递给父组件显示。

おすすめ

転載: www.cnblogs.com/suRimn/p/10937996.html