ベスト プラクティス: Vue 3 でコンポーネントを DOM にアタッチする方法
<p>Vue 3 アプリケーションのシングル ファイル コンポーネント (SFC) 内にコンポーネントを動的に作成し、DOM に追加したいと考えています。私は <code><script setup></code> スタイル コンポーネントを使用していますが、それは別の問題です。 </p>
<p>これは不必要に難しいようです。 </p>
<p>私がやりたいことは大まかに次のとおりです:</p>
<ol>
<li>データを取得します。完成しました。 </li>
<li>Vue コンポーネントのインスタンス (Foo.vue) を作成します。 </li>
<li>データをプロパティとして渡します。 </li>
<li>必要な場所に追加します。 </li>
</ol>
<p>問題は、テンプレートがレンダリングされてからどのくらい時間がかかるかわからないため、テンプレートで <component :is="Foo:> を使用できないことです。</p>
<p>ベストプラクティスはありますか?簡単な例を教えていただける親切な方がいらっしゃいましたら、よろしくお願いいたします。 </p>
<p>Vue ドキュメントを半分も理解できないことがあります。申し訳ありませんが、言いたくないのですが、Vue の初心者にとって、これらは非常にわかりにくく、愚かに感じます。 </p>
<p>これが私がやろうとしている偽のコードです: </p>
<pre class="brush:php;toolbar:false;">「../components/Foo.vue」から Foo をインポート
関数 makeAFoo(p, data){
// Foo.vue をインスタンス化し (これをインラインで行う方法がわかりません)、必要なデータを渡します
let foo = new Foo(data); // こんなに単純だったらいいのにね?
//それを p (HTML 要素) に追加します
p.appendChild(foo)
}</pre>
<p><br /></p>
