Nuxt / Vue.js-基于道具动态加载子组件

JavaScript Vue.js

卡卡西Near

2020-03-24

我有一个sectionHeader.vue要在许多不同页面上使用组件。在里面sectionHeader.vue是一个<canvas>元素(我正在使用一些健壮的three.js动画),我希望通过props动态地在每个标头内部进行更改。我想使这项工作能够充分利用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>

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

组件/动画/健壮动画-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.

我查看了作用域内的插槽,它看上去与我需要的位置很接近,但不完全相同。有没有更好的方法来做我正在尝试的事情?

第3492篇《Nuxt / Vue.js-基于道具动态加载子组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android