コンポーネントが親コンポーネントから動的に変更されたときに子コンポーネントのメソッドを呼び出す

Question

親コンポーネントが1つあり、<div><component :is="current"></component></div>のテンプレートと2つの子コンポーネントを含む単純なコンポーネント階層があり、その値はcurrentです。

コンポーネントの「スイッチング」のロジックが親コンポーネントで処理されています。しかし、私がmountedライフサイクルを通して、2番目の子コンポーネント（最初の子コンポーネントから放出されたイベントに応答して親コンポーネントで聴いて、親コンポーネントでcurrentの値を変更する）を実行しようとすると、フック、期待された結果は観察されません。

基本的に、子コンポーネントのメソッドが親コンポーネントの現在のコンポーネントとして「切り替え」されている場合、それを適切に呼び出すことができません。

私は現実には$refsと$childrenのプロパティをインスタンスで使用してみましたが、これらは役に立たないようです。私はイベントシステムの使用も推論しました。私は通常、mountedライフサイクルフックのイベントリスナーを定義していますが、ライフサイクルフックを使用する際の「問題」を参照してください。

この状況に対する通常のアプローチは何ですか？

1）mountedライフサイクルフックを使用：

Answer 1

はすぐに子コンポーネントが「現在」の子コンポーネントであることにメソッドを呼び出すために頭に浮かぶ2つのオプションがあります。これを有効にするには、子コンポーネントを条件付きで表示するためにv-ifを使用する必要があります。そうしないと、子コンポーネントはmountedライフサイクルフックをトリガーしません。そうでない場合、子コンポーネントを条件付きで表示するためにv-showやその他のメカニズムを使用している場合、mountedフックは一度だけトリガーされます。

2）監視プロパティを使用する。上記の代わりに、次のような何かができます：

<child-component :target_prop="current"></child-component> 

Vue.component('child-component', { 
    . . ., 
    props: ['target_prop'], 
    watch: { 
     target_prop: function() { 
      if(this.target_prop == your_expected_value) { 
       //execute the desired method for this component 
      } 
     } 
    } 
}); 

をこれは、もちろん、単なる概念実証の一例であり、あなたの利点に注目プロパティを使用する別の方法がたくさんあります。

コンポーネント間の通信に「バス」を使用していることも聞いたことがありますが、上記の2つの解決策よりも優れているとは思われません（おそらく悪化します）。

私は個人的にはmountedライフサイクルフックのアプローチを推奨しますが、子コンポーネントの設定やデータは、それらの切り替え時に失われることに注意してください（ただし、破壊時に設定オブジェクトを発行したり、必要に応じてそれらの設定を復元しますが、それは乱雑になる可能性があります）。どんなアプローチがあなたのニーズに合っていて、どの結果があなたにとってより快適であるかを最終的に判断する必要があります。