Vue3 のカスタム ディレクティブを使用してコンポーネントにデータを渡す: ガイド

Question

この動作を実現したいです

リーリー

カスタム ディレクティブを使用して、'pizza' をコンポーネントに渡し、それを SimpleComponent で使用できました。

このアイデアは、(v-slot 経由で) 上位の親スコープに配置することです。これは古いやり方であり、おそらく最良の方法ではありませんが、構文はクライアントにとって重要です (ここに入力された文字)少ないほど良いです）。

Vue2 の github の問題を見つけましたが、Vue3 で機能させる方法や構文さえわかりません (vNode.context ではなく binding.instance## であることはわかっています) # 今では、Vue3 はプロキシを使用するため、 $set は必要ありません)。

ドキュメントはあまり役に立ちませんでした。また、通常の開発ツールでサンプルを調べても何の手がかりも得られませんでした。

PS:

SimpleComponent 自体内でほとんど何でも行うことができます。コンポーネントの外側からそれを見る必要がないだけです。

Answer 1

免責事項

これはかなりハック的であり、Vue API (readonly であることを明確に示している) に反するため、おそらく正しい方法ではありません。そのため、そのとおりです。おそらくそのような使い方はしたくないでしょう。

さらに、ディレクティブは、他の場所で Vue の状態に到達して変更するのではなく、DOM 要素の変更に使用されます。私のチームのニーズは非常に困難です。
自宅で再現せず、代わりに通常の小道具を使用してください。

---

一方、そうする場合は、次のことを行う必要があります。

page.vue

リーリー

SimpleDiv.vue

リーリー