我如何将 Vue.component 与模块或 Vue CLI 一起使用？ 全局组件本地组件

问题描述

我被困在如何在导出默认值中声明 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 的位置

先谢谢你！

解决方法

组件可以全局或本地注册。 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' }
      ],};
  },}

,

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

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

export default {
  name: "App",components: {      
    todoItem:() => import("@/components/todoItem.vue")
  },}