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

Question

我被困在如何在 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

提前致谢！

Answer 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' }
      ],
    };
  },
}

Answer 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' }
      ],
    };
  },
}