Vue.js 在<；组件>；标签

我有一个这样的vue模板

<template>
  <div>
    <component v-for="item in contents" :key="item.id" :is="item.component" v-bind="item.parameters">
    </component>
  </div>
</template>

但我无法使其与预先存在的组件（如vuetify中的

v-text-field

）一起工作，除非我再次手动定义这些组件，例如：

import VTextField from "vuetify/lib/components/VTextField";
import VTextarea from "vuetify/lib/components/VTextarea";

及

所以问题是，如果我直接在模板中键入

，我如何避免导入所需的每个vuetify组件

我得到的错误：

[Vue warn]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

---

这是我的

main.js

文件：

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  render: h => h(App),

  data: {
    products: []
  },

  vuetify,

  mounted () {
  }
}).$mount('#app')

这是plugins/vuetify

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
});

---

在App.vue内部，我有一个按钮，显示

，这是我试图在上面显示的Vuetify在执行

vue时默认全局注册所有组件。使用（Vuetify）

。这允许您使用Vuetify组件，而无需在组件中显式注册它们：

src/plugins/vuetify.js：

从“Vue”导入Vue
从“Vuetify/lib”导入Vuetify
Vue.use（Vuetify）
导出默认的新Vuetify（{}）

src/main.js：

从“Vue”导入Vue
从“./plugins/vuetify”导入vuetify
新Vue({
vuetify，
...
})

为了避免代码膨胀（捆绑未使用的组件），Vuetify建议使用：

跟踪您正在使用的所有组件可能是一件非常麻烦的事情。通过自动导入您使用的所有Vuetify组件（在您使用它们的地方），可以减轻这种痛苦。这也将使代码拆分更加有效，因为webpack将只加载显示该块所需的组件

您可以将项目配置为使用

vuetify loader

，如下所示：

vue.config.js：

const VuetifyLoaderPlugin=require（'vuetify-loader/lib/plugin'））
module.exports={
配置网页包：{
插件：[
新VuetifyLoaderPlugin（）
],
}
}

---

您使用的是哪个版本的vuetify？@Hammerbot版本2.1.0，但我认为这不重要，对吧？在我使用“/plugins/vuetify”中的

vuetify之前，像这样：
新的Vue（…，vuetify…）
。在我更改为
Vue.use（Vuetify）
后，它仍然显示相同的错误：
未知自定义元素：-您是否正确注册了组件？
实际上在插件Vuetify库中，有
Vue.use（Vuetify）
Already我不明白为什么它对你的示例有效，但对我的代码无效…@JMarkov在我改为Vue.use（Vuetify）

后你说的

，这意味着你以前没有这么做过。问题可能在于如何初始化Vuetify。请在你的问题中说明这一点。但是我说在vuetify插件文件中有这个代码！
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  render: h => h(App),

  data: {
    products: []
  },

  vuetify,

  mounted () {
  }
}).$mount('#app')

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
});