Vue - v-for ループは複数の「繰り返される」サブコンポーネントをレンダリングします (ref のみが異なります。これを使用すると、this.$refs.xx はサブコンポーネントを正確に見つけることができます) サブコンポーネントの ref を動的として設定し、各サブコンポーネントは「独立」しています! 詳細なチュートリアル

序文

このチュートリアルのその他のバージョン: uni-app | WeChat アプレット

ref 値をコンポーネントにバインドし、this.$refs.xx を通じてこのコンポーネントのメソッドと変数を取得します。

コンポーネントが v-forの(固定参照をバインド)、この参照は「まったく同じ」になり、まったく見つかりません (これは誰ですか?$refs.xx?)。

この問題を解決するには、さまざまな ref 属性値を動的に、最終的にプログラムはそれを「自動的に」見つけることができます。


下図のように、親コンポーネントのボタンがクリックされると、子コンポーネントのメソッドが呼び出されてテキストの効果が設定され、

Multiple subcomponents are wrap by a v-for loop to render multiple subcomponents. 各サブコンポーネントには異なる参照があるため、それらはすべて「独立」しています。

仅完成了核心功能,代码干净整洁注释详细

ここに画像の説明を挿入

サンプル ソース コード

ワンクリック コピー機能を使用して、新しいページを見つけ、直接実行して効果を確認することをお勧めします。

おすすめ

転載: blog.csdn.net/weixin_44198965/article/details/129141566