javascript - Nuxt/Vue.js - 基于 Prop 动态加载子组件

Question

我有一个 sectionHeader.vue我想在许多不同页面上使用的组件。里面sectionHeader.vue是 <canvas>元素(我正在将其用于一些强大的 three.js 动画)，我想通过 Prop 动态更改每个标题的内部。我想让这个工作发挥 Vue 固有的代码拆分的优势，这样每个页面就不会加载所有其他页面的动画 js 代码，而只会加载与其相关的代码。

我正在尝试使用 dynamic components 动态加载它但我认为这不是我要找的...

我的文件夹结构:

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

页面/index.vue:

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

组件/SectionHeader.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>

组件/动画/robust-animation-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.

我查看了作用域插槽，它看起来很接近我需要的，但不完全是。有没有更好的方法来完成我正在尝试的事情？

Answer 1

我已经成功地基于 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>

组件/SectionHeader.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>

您缺少作为 SectionHeader.vue 组件一部分的最后一个计算步骤

组件/动画/robust-animation-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