0

私のコンポーネントはかなり大きいので、簡単な例を示します。誰かが私の問題を解決する方法を知っているかもしれません。

「subtotal」、「vat_subtotal」、「total」などの子コンポーネントを持つ請求書コンポーネントがあります（例です）。請求書コンポーネントからすべての子に直接アクセスするために v-ref を使用しています。また、小計は請求書のプロパティから計算され、vat_subtotal は小計の子プロパティから計算されます。「合計」は vat_subtotal の子から計算されます。

例：

invoice.$refs.subtotal.total = {some calculations}
vat_subtotal.total = @$parent.$refs.subtotal.total * 1.21
total.total = @$parent.$refs.vat_subtotal.total

問題は、「合計」の子が「vat_total」の子プロパティにアクセスしようとしているために、ページの読み込み時に警告が表示されることですが、@ $parent.$refs.vat_total はまだ「未定義」です (理由はわかりません)。 . 後でフォームの何かを変更すると、正常に反応し、すべてが正しく再計算されます)。他の子がまだロードされていない間に、1 つの子がプロパティを計算しようとしているようです。

4

2 に答える 2

3

データのために子供に手を差し伸べないでください。親がアクセスを必要とする場合 (あなたの場合、別の子にアクセスを許可するため)、データ項目を親で作成しprop、子に として渡す必要があります。このようにして、複数の子供の間でデータを共有できます。子コンポーネントは、親を介して利用可能な他の子コンポーネントに依存してはなりません (または、実際には、 として渡されない場合は、親内の何かに依存してはなりませんprop)。

prop子コンポーネントが値の変更を担当する場合は、を使用して渡すこと.syncができます。

于 2016-09-17T14:00:57.193 に答える
2

あなたが問題を解決しようとしている方法は技術的には可能ですが、非常にお勧めできません。ドキュメントに記載されているように：

親チェーン内の任意のインスタンスにアクセスすることは可能ですが、子コンポーネント内の親データに直接依存することは避け、props を使用して明示的にデータを渡すことを優先する必要があります。さらに、次の理由から、子コンポーネントから親状態を変更することは非常に悪い考えです。

  1. これにより、親と子が緊密に結合されます。

  2. 親の状態は子によって変更される可能性があるため、単独で見ると、親の状態を判断するのがはるかに難しくなります。理想的には、コンポーネント自体のみが自身の状態を変更できるようにする必要があります。

一般に、アプリケーションの状態を表すモデルを作成することを目指す必要があります。親/子に直接アクセスする代わりに、小道具を使用して関連データを子に渡します。子はeventsを使用して変更について親に通知できます。また、 .syncバインディングを使用してモデルを自動的に同期することもできます。

Vue アプリケーション アーキテクチャへのより構造化されたアプローチについて読むことは有益だと思います。Vue.js の Flux にインスパイアされたアプリケーション アーキテクチャから始めます。

于 2016-09-17T14:18:23.833 に答える