如何将 Vue.component 与模块或 Vue CLI 一起使用？答案

【问题标题】：How do I use Vue.component with modules or Vue CLI?如何将 Vue.component 与模块或 Vue CLI 一起使用？
【发布时间】：2021-05-05 06:55:36
【问题描述】：

我不知道如何在 export default 中声明 Vue.component

这是来自vuejs.org的教程

我没有使用var app = new vue，而是使用

export default {
  name: "App",
  
  el: "#app-7",
  data() {
    return {
      barangBelanjaan: [
        { id: 0, barang: 'Sayuran' },
        { id: 1, barang: 'Keju' },
        { id: 2, barang: 'Makanan yang lain' }
      ],
    };
  },
};

我不知道在导出默认应用程序中在哪里编写 Vue.component

先谢谢你！

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-cli

【解决方案1】：

组件可以在全局或本地注册。 Vue.component 是全局注册的方式，这意味着所有其他组件都可以在其模板中使用该组件。

全局组件

使用 Vue CLI 等构建工具时，请在 main.js 中执行此操作：

import Vue from 'vue'
import todoItem from '@/components/todoItem.vue'  // importing the module

Vue.component('todoItem', todoItem);              // ✅ Global component

-或-

本地组件

或者您可以使用components 选项在特定组件中注册组件。

components: {
  todoItem
}

所以你的 App.vue 会变成：

import todoItem from '@/components/todoItem.vue'  // importing the module

export default {
  name: "App",
  el: "#app-7",
  components: {      // ✅ Local components
    todoItem
  },
  data() {
    return {
      barangBelanjaan: [
        { id: 0, barang: 'Sayuran' },
        { id: 1, barang: 'Keju' },
        { id: 2, barang: 'Makanan yang lain' }
      ],
    };
  },
}

【讨论】：

【解决方案2】：

各种录制选项都是可能的，例如

components: {      
    todoItem:() => import("@/components/todoItem.vue")
}


export default {
  name: "App",
  el: "#app-7",
  components: {      
    todoItem:() => import("@/components/todoItem.vue")
  },
  data() {
    return {
      barangBelanjaan: [
        { id: 0, barang: 'Sayuran' },
        { id: 1, barang: 'Keju' },
        { id: 2, barang: 'Makanan yang lain' }
      ],
    };
  },
}

【讨论】：