찾다

집  >  Q&A  >  본문

모범 사례: 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>
P粉362071992P粉362071992451일 전589

모든 응답(2)나는 대답할 것이다

  • P粉004287665

    P粉0042876652023-08-25 18:25:26

    더 쉬운 방법은 v-if 또는 v-for를 사용하는 것입니다.

    컴포넌트를 직접 처리하는 대신 컴포넌트의 상태를 처리하고 Vue의 반응성이 마술처럼 작동하도록 합시다

    이것은 동적으로 구성요소(Toast)를 추가하고 구성요소의 상태를 조작하는 예시입니다

    Toast.vue 파일: 여기서 v-for는 반응적입니다. 오류 개체에 새 오류가 추가될 때마다 렌더링됩니다

    으아악

    ErrorTrigger.vue: 클릭 이벤트가 발생할 때마다 오류 객체에 오류를 푸시합니다

    으아악

    전체 예: https://stackblitz.com/edit/vitejs-vite-mcjgkl

    회신하다
    0
  • P粉598140294

    P粉5981402942023-08-25 00:33:13

    옵션 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)

    사용

    만들기: createApp()createApp()创建一个应用实例。该实例具有mount()을 사용하여 적용 사례 . 이 인스턴스에는 mount()

    메서드가 있습니다. Used 지정된 컨테이너 요소에 구성 요소를 렌더링합니다.

    파괴: 애플리케이션 인스턴스에는 애플리케이션 및 구성 요소 인스턴스를 파기하는 unmount()方法来销毁应用和组件实例。当父组件卸载时（通过unmountedunmount()

    메서드가 있습니다. 상위 구성요소가 마운트 해제될 때(unmounted 수명 주기 후크를 통해) 정리하기 위해 이 메소드를 호출해야 합니다.

    으아악 참고:

    이 방법은 문서에서 여러 구성 요소를 동시에 인스턴스화해야 하는 경우 각 구성 요소에 대한 애플리케이션 인스턴스를 생성하므로 상당한 오버헤드가 발생할 수 있습니다.

    데모 2

    사용예시🎜 으아악

    회신하다
    0
  • 취소회신하다