ホスト設定関数の外で、Vue3 動的コンポーネントでプロビジョニング/インジェクションを宣言する方法はありますか?

Question

<p><code>Vue3</code> で <code>動的コンポーネント</code> を作成しています。 v-bind を使用して props を提供します。 </p> <pre class="lang-js prettyprint-override"><code><component :is='MyComponent' v-bind='myProps' /> </code></pre> <p><code> を使用して </code> 機能を提供/挿入したいと考えています。提供したプロパティを動的コンポーネントに追加するにはどうすればよいですか。私の動的コンポーネントは、<code>setup</code> 関数で <code>inject</code> を呼び出し、その子コンポーネント <code> の </code> 値を期待しています。 </p> <p>これは Vue では文書化されていませんが、試してみましたが成功しませんでした。 </p> <pre class="brush:php;toolbar:false;"><component :is='MyComponent' v-bind='myProps' :provide='myProvidedProps'/></pre> <p><code>provide</code> オブジェクトを <code>props</code> オブジェクトに入れてみました。 </p>

Answer 1

Vue3 ソース コードを参照した後、指定をテンプレートで 動的コンポーネントに直接提供する方法はありません。これは、動的コンポーネントをホストする親の設定関数またはオプション、あるいは動的コンポーネントの設定またはオプションで呼び出す必要があります。

2 つのオプションは次のとおりです:

動的コンポーネントをホストするコンポーネントで
1. provide を呼び出します。
リーリー リーリー

これは、動的コンポーネントがアクティブ化される前にセッター関数が呼び出されるため、私にとっては機能しません。提供された値とともにコンポーネントのタイプも設定する必要があります。

props として提供される項目をコンポーネントに送信し、動的コンポーネントからそれらを呼び出せるようにします。
リーリー リーリー

私のコンポーネント

リーリー

ここで、各動的コンポーネントが受信プロバイダーを理解し、呼び出す責任を負う必要があるため、これには問題があります。

解決策 1

各コンポーネントが提供された値を知る必要がある場合の解決策は、値を提供する中間コンポーネントを作成することです。

利用可能 (中間コンポーネント)

リーリー

次のように使用します:

リーリー

解決策 2

よりクリーンな解決策は、キープアライブの仕組みと同様に、ラッパー コンポーネントを作成することです。ターゲット コンポーネントは

default スロット に配置するだけで済みます。

Provide.vue

リーリー

そして次のように使用します:

リーリー