Vue の親コンポーネントから子コンポーネントに値を動的に渡す 2 つの方法を共有する

一部のプロジェクト要件では、親コンポーネントが子コンポーネントに値を動的に転送する必要があります。たとえば、ここでの要件は、親コンポーネントが返された画像 URL 配列を axios を通じて動的に取得し、それを子コンポーネントに渡すことです。子コンポーネントは画像をアップロードした後、配列を取得して画像を表示します。この記事では主に、Vue の親コンポーネントから子コンポーネントに値を動的に転送する 2 つの方法を紹介します。必要な方は参考にしていただければ幸いです。

メソッドは 2 つあります。

メソッド 1:

props は値を渡します。ここで問題に注意してください。渡された値は監視し、watch で割り当てる必要があります。そうでない場合、ここで取得されるものは空の配列になります

Parentコンポーネント:

<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>

this.productImage=res.data.cover;

ここでは、バックグラウンドを介して返された配列が

this.productImage に割り当てられ、その配列がサブコンポーネントによって定義された props 属性 src-list に渡されます

サブコンポーネント:

watch:{
     srcList(curVal,oldVal){
      if(curVal){
       ;
       this.uploadImg=curVal;
       }
     },
}

その後、サブコンポーネントが正常に実行されました配列を取得します

メソッド 2 :

ref 属性を通じて、親コンポーネントはサブコンポーネントのメソッドを呼び出し、パラメータとして渡される配列をサブコンポーネントに渡します。サブコンポーネントはパラメータを取得し、

親コンポーネントを使用します。

this.$refs.productImage.getSrcList(res.data.cover);

子コンポーネント:

getSrcList(val){
  this.uploadImg=val;
}

PS: サブコンポーネントにデータを渡す vuejs 動的コンポーネントを見てみましょう

サブコンポーネントが定義されているときの props は、親コンポーネントがサブコンポーネントにデータを渡すことをサポートできます。これらの定義されたプロパティは、サブコンポーネントのタグでバインディング属性を使用できますが、現時点では、 コンポーネントにデータを渡すことはできません。コンポーネントの関数は独立しています

後続のコンポーネントからデータを取得したい場合は、レイヤーごとに渡す必要があります。つまり、子コンポーネントは直接の親コンポーネントからのみデータを取得できます。それがルート コンポーネントのデータである場合、親コンポーネントはルート コンポーネントからデータをバインドするためにポップを公開し続ける必要があります。

関連する推奨事項:

vueでのページ逆値転送の簡単な実装方法を共有する

Vue2.0コンポーネント値転送の問題

phpでの値転送方法の紹介

以上がVue の親コンポーネントから子コンポーネントに値を動的に渡す 2 つの方法を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。