모범 사례: Vue 3에서 DOM에 구성 요소를 연결하는 방법
P粉362071992
2023-08-24 19:51:03
<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
더 쉬운 방법은 v-if 또는 v-for를 사용하는 것입니다.
컴포넌트를 직접 처리하는 대신 컴포넌트의 상태를 처리하고 Vue의 반응성이 마술처럼 작동하도록 합시다
이것은 동적으로 구성요소(Toast)를 추가하고 구성요소의 상태를 조작하는 예시입니다
Toast.vue 파일: 여기서 v-for는 반응적입니다. 오류 개체에 새 오류가 추가될 때마다 렌더링됩니다
으아악ErrorTrigger.vue: 클릭 이벤트가 발생할 때마다 오류 객체에 오류를 푸시합니다
으아악전체 예: https://stackblitz.com/edit/vitejs-vite-mcjgkl
옵션 1:
사용createVNode(component, props)和render(vnode, container)Create:
createVNode()创建一个带有props的组件定义的VNode（例如，从*.vue导入的SFC），可以将其传递给render()를 사용하여 지정된 컨테이너 요소를 렌더링합니다.Destroy:
으아악render(null, container)会销毁附加到容器的VNode。当父组件卸载时（通过unmountedlifecycle 후크 호출) 정리를 위해 이 메서드를 호출해야 합니다.참고: 이 방법은 향후 버전에서 리팩토링되거나 제거될 수 있는 내부 방법(
createVNode和render)을 사용합니다.데모 1
옵션 2:
사용createApp(component, props)和app.mount(container)만들기:
메서드가 있습니다. Used 지정된 컨테이너 요소에 구성 요소를 렌더링합니다.createApp()createApp()创建一个应用实例。该实例具有mount()을 사용하여 적용 사례 . 이 인스턴스에는mount()파괴: 애플리케이션 인스턴스에는 애플리케이션 및 구성 요소 인스턴스를 파기하는
메서드가 있습니다. 상위 구성요소가 마운트 해제될 때(unmount()方法来销毁应用和组件实例。当父组件卸载时（通过unmountedunmount()unmounted수명 주기 후크를 통해) 정리하기 위해 이 메소드를 호출해야 합니다.으아악 참고:
이 방법은 문서에서 여러 구성 요소를 동시에 인스턴스화해야 하는 경우 각 구성 요소에 대한 애플리케이션 인스턴스를 생성하므로 상당한 오버헤드가 발생할 수 있습니다.데모 2
사용예시🎜 으아악