모범 사례: Vue 3에서 DOM에 구성 요소를 연결하는 방법
<p>SFC(단일 파일 구성 요소) 내부의 Vue 3 애플리케이션에서 구성 요소를 동적으로 생성하고 DOM에 추가하고 싶습니다. 저는 <code><script setup></code> 스타일 구성 요소를 사용하고 있는데 이는 또 다른 문제입니다. </p>
<p>이건 불필요하게 어려운 것 같습니다. </p>
<p>제가 하고 싶은 일은 대략 다음과 같습니다.</p>
<올>
<li>데이터를 얻으세요. 완료되었다. </li>
<li>Vue 구성 요소의 인스턴스인 Foo.vue를 만듭니다. </li>
<li>데이터를 속성으로 전달합니다. </li>
<li>원하는 위치에 추가하세요. </li>
</ol>
<p>문제는 템플릿이 렌더링된 후 오랫동안 어디에 있을지 모르기 때문에 템플릿에서 <comComponent :is="Foo:>를 사용할 수 없다는 것입니다.</p>
<p>모범 사례가 있나요? 혹시 간단한 예를 들어주실 수 있는 친절한 분이 계시다면 정말 감사하겠습니다. </p>
<p>저는 가끔 Vue 문서를 절반도 이해하지 못할 때가 있습니다. 죄송합니다. 말하기 싫지만 Vue의 초보자에게는 매우 모호하고 바보 같은 느낌을 줍니다. </p>
<p>내가 하려는 작업에 대한 가짜 코드는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">"../comComponents/Foo.vue"에서 Foo 가져오기
함수 makeAFoo(p, 데이터){
// Foo.vue를 인스턴스화하고(인라인으로 수행하는 방법을 잘 모르겠습니다) 필요한 데이터를 전달합니다.
let foo = new Foo(data); // 그렇게 간단하다면 어떨까요?
//p(HTML 요소)에 추가합니다.
p.appendChild(foo)
}</pre>
<p><br /></p>
