SFC(단일 파일 구성 요소) 내부의 Vue 3 애플리케이션에서 구성 요소를 동적으로 생성하고 DOM에 추가하고 싶습니다. 저는
스타일 구성 요소를 사용하고 있는데 이는 또 다른 문제입니다.
이건 불필요하게 어려운 것 같습니다.
제가 하고 싶은 일은 대략 다음과 같습니다.
<올>
데이터를 얻으세요. 완료되었다. Vue 구성 요소의 인스턴스인 Foo.vue를 만듭니다. 데이터를 속성으로 전달합니다. 원하는 위치에 추가하세요. 문제는 템플릿이 렌더링된 후 오랫동안 어디에 있을지 모르기 때문에 템플릿에서 "../comComponents/Foo.vue"에서 Foo 가져오기 함수 makeAFoo(p, 데이터){ // Foo.vue를 인스턴스화하고(인라인으로 수행하는 방법을 잘 모르겠습니다) 필요한 데이터를 전달합니다. let foo = new Foo(data); // 그렇게 간단하다면 어떨까요? //p(HTML 요소)에 추가합니다. p.appendChild(foo) }
더 쉬운 방법은 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
。当父组件卸载时(通过unmounted
lifecycle 후크 호출) 정리를 위해 이 메서드를 호출해야 합니다.참고:이 방법은 향후 버전에서 리팩토링되거나 제거될 수 있는 내부 방법(
createVNode
和render
)을 사용합니다.데모 1
옵션 2:
사용createApp(component, props)
和app.mount(container)
만들기:
메서드가 있습니다. Used 지정된 컨테이너 요소에 구성 요소를 렌더링합니다.createApp()
createApp()
创建一个应用实例。该实例具有mount()
을 사용하여적용 사례. 이 인스턴스에는mount()
파괴:애플리케이션 인스턴스에는 애플리케이션 및 구성 요소 인스턴스를 파기하는
메서드가 있습니다. 상위 구성요소가 마운트 해제될 때(unmount()
方法来销毁应用和组件实例。当父组件卸载时(通过unmounted
unmount()
unmounted
수명 주기 후크를 통해) 정리하기 위해 이 메소드를 호출해야 합니다.으아악참고:
이 방법은 문서에서 여러 구성 요소를 동시에 인스턴스화해야 하는 경우 각 구성 요소에 대한 애플리케이션 인스턴스를 생성하므로 상당한 오버헤드가 발생할 수 있습니다.데모 2
사용예시 으아악