Question

我希望Nuxtjs动态地渲染Vue组件。在Vuejs中，我可以像这样工作。但这不适用于nuxt，我无法理解：

https://codesandbox.io/s/young-wood-lw0gl

<html>
  <head>
    <title>Vue Component Blog Post Example</title>
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" type="text/css" href="/style.css" />
  </head>
  <body>
    <div id="dynamic-component-demo">
      <component v-bind:is="testcomp" class="tab"></component>
    </div>

    <script>
      new Vue({
        el: "#dynamic-component-demo",
        data: {
          text: "Text",
          button: "<button>Save</button>",
          currentTab: "Posts",
          tabs: ["Posts", "Archive"]
        },
        computed: {
          testcomp() {
            Vue.component("testcomp", {
              template: `<div>Archive components ${this.text}
              ${this.button}
              </div>`
            });

            return "testcomp";
          }
        }
      });
    </script>
  </body>
</html>

但是在Nuxtjs中，它什么都不显示

<template>
  <section>
    test
    <component v-bind:is="testcomp" class="tab"></component>
  </section>
</template>

<script>
import Vue from 'vue'

export default {
  data() {
    return {
      text: 'Test',
      button: '<button>Save</button>'
    }
  },
  computed: {
    testcomp() {
      Vue.component("testcomp", {
        template: `<div>Archive components ${this.text}
        ${this.button}
        </div>`
      });

      return "testcomp";
    }
  }
}
</script>

我想我必须将vue.use()包裹在Nuxt中。但我不确定

Nuxtjs中的动态Vue组件

0 个答案: