ベスト プラクティス: Vue 3 でコンポーネントを DOM にアタッチする方法
P粉362071992
2023-08-24 19:51:03
<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
もっと簡単な方法は、v-if または v-for を使用することです。
コンポーネントを直接扱うよりも、コンポーネントの状態を扱い、Vue の応答性の高い魔法を働かせるほうがよいでしょう。
これは例であり、コンポーネント(トースト)を動的に追加し、コンポーネントの状態を操作するだけです
Toast.vue ファイル: ここの v-for はリアクティブであり、新しいエラーがエラー オブジェクトに追加されるたびにレンダリングされます
リーリーErrorTrigger.vue: クリック イベントが発生するたびに、エラーをエラー オブジェクトにプッシュします
リーリー完全な例: https://stackblitz.com/edit/vitejs-vite-mcjgkl
オプション 1:
を使用します。createVNode(component, props)とrender(vnode,container)作成:
createVNode()を使用して、プロパティを使用してコンポーネント定義のVNodeを作成します (たとえば、*.vueから)インポートされた SFC) をrender()に渡して、指定されたコンテナ要素でレンダリングできます。破棄:
リーリーrender(null,container)を呼び出すと、コンテナにアタッチされているVNodeが破棄されます。このメソッドは、親コンポーネントがアンマウントされたときに (unmountedライフサイクル フック経由で) クリーンアップするために呼び出す必要があります。注: このメソッドは内部メソッド (
createVNodeおよびrender) に依存しており、将来のバージョンではリファクタリングまたは削除される可能性があります。デモ 1
オプション 2:
を使用します。createApp(component, props)およびapp.mount(container)作成:
createApp()を使用して、 アプリケーション インスタンスを作成します。このインスタンスには、特定のコンテナ要素上でコンポーネントをレンダリングするために使用できるmount()メソッドがあります。破壊: アプリケーション インスタンスには、アプリケーションとコンポーネントのインスタンスを破壊するための
リーリーunmount()メソッドがあります。このメソッドは、親コンポーネントがアンマウントされたときに (unmountedライフサイクル フック経由で) クリーンアップするために呼び出す必要があります。注: このメソッドは、コンポーネントごとにアプリケーション インスタンスを作成します。ドキュメント内で複数のコンポーネントを同時にインスタンス化する必要がある場合、かなりのオーバーヘッドが発生する可能性があります。
デモ 2
使用例
リーリー