Question

我正在使用vue-form-generator并试图使它呈现简单的表单而没有成功。我将在数十个文件中重复使用此生成器，因为我的应用程序很笨重，并且想使它成为全局文件，所以我将只管理组件中的所有内容。

main.js文件

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from 'bootstrap-vue';
import "./registerServiceWorker";
import VueFormGenerator from "vue-form-generator";

Vue.use("VueFormGenerator", VueFormGenerator);
Vue.config.productionTip = false;
Vue.use(BootstrapVue);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

我有一个较大的模板，大部分页面都使用此模板，这是我尝试使用VueFormGenerator

的模板文件

NewTrade.vue

<template>
    <div>
    <p class="introText">Please try to stick to your strategy and use the Manual mode as little as possible if at all! </p>
        <form action="#">
            <VueFormGenerator
                    :schema="schema"
                    :model="model"
            />
        </form>
    </div>
</template>

<script>


export default {

  data() {
    return {
      model: {
        name: "David Johnson"
      },
      schema: {
        fields: [
          {
            name: "text"
          }
        ]
      }
    }
  }
}
</script>

这是我在Chrome中遇到的错误。

[Vue warn]: Unknown custom element: <VueFormGenerator> - did you register 
the component correctly? For recursive components, make sure to provide the 
"name" option.

found in

---> <NewTrade> at src/components/NewTrade.vue
   <Trading> at src/components/Trading.vue
     <App> at src/App.vue
       <Root>

Answer 1

只需使用myArray代替component

use

通常，您会在此处和模板中使用import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import BootstrapVue from 'bootstrap-vue'; import "./registerServiceWorker"; import VueFormGenerator from "vue-form-generator"; Vue.component("VueFormGenerator ", VueFormGenerator); // <-- component instead of use Vue.config.productionTip = false; Vue.use(BootstrapVue); new Vue({ router, store, render: h => h(App) }).$mount("#app");而不是vue-form-generator作为组件名称，这是惯例，但是只有在编译运行时才需要。

这是一个有效的示例：https://codesandbox.io/s/o77lmqq9v6

如何从Vue2中的依赖关系使用全局组件

1 个答案: