Vue.jsの深くネストされた子コンポーネントからデータにアクセスする方法

Vue.jsを使用してインタフェースを構築しています。私はフォームを持っています、このフォームはアドレスとその他のビットの雑多なデータを含んでいます。そこで私はVueに2つのコンポーネント、UserDataとUserAddressを作成しました。 UserDataには、子コンポーネントとしてUserAddressのインスタンスが含まれています。ページに応じてフォームの「送信」ボタンの動作を特化したいので、これらのコンポーネントには送信ボタンは含まれません。ページを表す外部コンポーネント（サブメニュー：UserPage）には送信ボタンが含まれていますUserDataテンプレートVue.jsの深くネストされた子コンポーネントからデータにアクセスする方法

階層はUserPage =>UserData =>UserAddressとなります。

今、私はUserPageのいくつかの方法ですべてのフォームデータを取得する必要があります。私はちょうど私が提出するハンドラ内でそれを得るために必要があると言うだろうが、私は直接の子要素のデータにアクセスせずにこれを行うに考えることができる唯一の方法は以下の通りです：

使用$broadcastが伝播します
がにe2の音を聞き、下方からイベントe1提出ハンドラ
メッセージとアドレスデータをイベントe2を送信し、バンドルするUserAddress
使用$dispatchにe1イベントをリッスンします、メッセージに他のフォームデータを追加し、イベントを伝播または再ディスパッチします。
e2をリッスンし、UserPageをリッスンし、そこに完全な集約データを見つけます。

これは、このような状況を処理する通常の方法ですか？それは過剰なもののようですが、アクセスする子供の$dataは明示的にマニュアルで推奨されていません。

出典

2016-04-08 amoe

と

<template> <input v-model="address"> </template> <script> export default { props: { address: { type: String, twoWay: true } } } </script>

親

<template> <div> <input v-model="uname"> <user-address :address.sync="uaddress"></user-address> </div> </template> <script> export default() { components: { 'user-address': userAddress }, props: { uaddress: { type: String, twoWay: true }, uname: { type: String, twoWay: true } } } </script>

この

子供のようにチェックthis fiddleだろう後、私は扱うことに気づきましたこれで私はすべてですnsane。あなたがこれをしたいときはいつでも、あなたはVuexを使うべきであるというサインです。また、イベントはVue 2.0ではなくなっているので、それらに頼らないでください。 – amoe

+0

イベントは2でなくなっていません。ブロードキャストとディスパッチの代わりにハブを使用するだけです。 – vbranden

+0

移行ガイドで廃止されていないものとしてマークされています。私はハブパターンを実験しましたが、すぐに制御が外れました。ヴェクスははるかに良いです。 – amoe

Vue.jsの深くネストされた子コンポーネントからデータにアクセスする方法

答えて

関連する問題