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

Question

I'm stuck on how to declare Vue.component inside export default

this is from the tutorial by vuejs.org

instead of using var app = new vue , I use

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

and i dont know where to write Vue.component in export default app

thank you in advanced!

Answer 1

Components can be registered globally or locally. Vue.component is the way to register globally, which means all other components can then use this component in their templates.

Global components

When using a build tool like Vue CLI, do this in main.js :

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

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

-or-

Local components

Or you can register a component in a specific component using the components option.

components: {
  todoItem
}

So your App.vue would become:

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

Various recording options are possible, for example

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