Nuxt/Vue.js - 프로포트를 기반으로 자 컴포넌트에 동적으로 로드

Nuxt/Vue.js - 프로포트를 기반으로 자 컴포넌트에 동적으로 로드

나는 가지고 있다sectionHeader.vue여러 페이지에서 사용하고 싶은 컴포넌트입니다.그 안에sectionHeader.vue는 입니다.<canvas>소품을 통해 각 헤더의 내부를 동적으로 변경하고 싶은 요소(강력한 3js 애니메이션에 사용).Vue 고유의 코드 분할을 활용하여 각 페이지가 다른 페이지마다 애니메이션 js 코드를 로드하지 않고 관련 코드만 로드하도록 하고 싶습니다.

동적 컴포넌트를 사용하여 동적으로 로드하려고 합니다만, 이것이 제가 원하는 것은 아닌 것 같습니다.

내 폴더 구조:

components
  animations
    robust-animation-1.vue
    robust-animation-2.vue
    maybe-like-15-more-of-these.vue
  headings
    heading2.vue
  SectionHeader.vue
pages
  index.vue

pages/index.vue:

<sectionHeader post-title="Menu" class-name="menu" canvas="./animations/robust-animation-1"></sectionHeader>

컴포넌트/섹션Header.vue:

<template>
    <section class="intro section-intro" :class="className">
        <heading2 :post-title="postTitle"></heading2>
        <component v-bind:is="canvas"></component> <!-- this is what i am dynamically trying to load --> 
        {{canvas}} <!-- this echos out ./animations/robust-animation-1 -->
    </section>
</template>

<script>
import heading2 from './headings/heading2';

export default {
    components: {
        heading2
    },
    props: [
        'postTitle', 'className', 'canvas'
    ]
}
</script>

컴포넌트/애니메이션/components-1.vue:

<template>
    <div>
        <canvas class="prowork-canvas" width="960" height="960"></canvas>
    </div>
</template>

<script>
// 200 lines of js here that manipulates the above canvas
</script>

나의heading2컴포넌트는 훌륭하게 동작하지만 애니메이션 컴포넌트를 동적으로 끌어당기는 방법을 알 수 없습니다.다음의 에러의 정도가 다릅니다.

client.js 76 DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('./animations/robust-animation-1') is not a valid name.

스코프 슬롯을 조사했는데, 필요한 슬롯에 가까운 것 같습니다만, 꼭 그런 것은 아닙니다.내가 하려는 일을 더 잘 할 수 있는 방법은 없을까?

다음을 기반으로 자식 구성 요소를 동적으로 로드했습니다.prop아래 코드를 참조해 주세요.

components
  animations
    robust-animation-1.vue
    robust-animation-2.vue
    maybe-like-15-more-of-these.vue
  headings
    heading2.vue
  SectionHeader.vue
pages
  index.vue

vuepages/index.vue:

  <section-header post-title="Menu" class-name="menu" canvas="./animations/robust-animation-1">
  </section-header>
  <script>
    import SectionHeader from "../components/SectionHeader";

    export default {
        name: 'PageIndex',
        components: {SectionHeader}
    }
  </script>

컴포넌트/섹션Header.vue:

<template>
  <div>
    post_title {{postTitle}}
    <br/>
    class-name {{className}}
    <br/>
    canvas {{canvas}}
    <br/>
    <heading2 post-title="postTitle"></heading2>
    <br/>
    <component v-bind:is="stepComponent"></component>
  </div>
</template>

<script>
    import Heading2 from "./headings/heading2";

    export default {
        name: "SectionHeader",
        components: {
            Heading2,
        },
        props: ['postTitle', 'className', 'canvas'],
        computed: {
            stepComponent() {
                let data = this.canvas.split('/')[2];
                return () => import(`./animations/${data}`);
            }
        },
    }
</script>

넌 마지막을 놓치고 있어computed섹션의 일부로서 스텝을 수행합니다.Header.vue 컴포넌트

컴포넌트/애니메이션/components-1.vue

<template>
  <div>
    From - robust-animation-1
  </div>
</template>

<script>
    export default {
        name: "robust-animation-1"
    }
</script>

출력:

post_title Menu 
class-name menu 
canvas ./animations/robust-animation-1 
postTitle 
From - robust-animation-1

언급URL : https://stackoverflow.com/questions/58810897/nuxt-vue-js-dynamically-loading-in-a-child-component-based-on-a-prop