如何在模块或Vue CLI中使用Vue.component？

Question

我一直在讨论如何在导出默认情况下声明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' }
      ],
    };
  },
}