Vue 组件组织结构及组件注册详情

Vue 组件是 Vue.js 中非常重要的一部分，它能够帮助我们将一个大型的项目模块化分解，使得代码更易于维护和扩展。本篇攻略将详细讲解Vue 组件的组织结构和组件注册的方法，希望能够帮助你更好地理解 Vue 组件。

组件组织结构

Vue 组件的组织结构一般如下图所示：

├── App.vue
├── types.d.ts
├── components
│   ├── my-component.vue
│   ├── other-component.vue
│   └── ...
├── mixins
│   ├── login-mixin.ts
│   ├── other-mixin.ts
│   └── ...
├── plugins
│   └── my-plugin.ts
├── directives
│   ├── focus-directive.ts
│   ├── other-directive.ts
│   └── ...
├── filters
│   ├── currency-filter.ts
│   ├── other-filter.ts
│   └── ...
├── router
│   └── index.ts
└── store
    ├── index.ts
    └── modules
        ├── user.ts
        └── ...

其中：

App.vue 是整个应用的根组件，所有其他组件都是在此基础上建立的。
components 文件夹存放所有的普通组件。
mixins 文件夹存放所有的混入（mixin）。
plugins 文件夹存放所有的插件（plugin）。
directives 文件夹存放所有的自定义指令（directive）。
filters 文件夹存放所有的自定义过滤器（filter）。
router 文件夹存放应用的路由配置信息。
store 文件夹存放应用的 Vuex 状态管理工具相关的配置信息。

以上所有的文件夹都可以按照实际情况进行调整，这只是一种最为常见的组织方式。

组件注册

在 Vue.js 中，组件可以分为全局组件和局部组件两种。下面我们将详细讲解如何进行组件注册。

全局组件的注册方式

在 Vue.js 中，可以使用 Vue.component 方法来创建全局组件。

示例一：

import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';

Vue.component('my-component', MyComponent);

在上述代码中，我们将 MyComponent.vue 文件引入，并注册了一个名为 my-component 的全局组件。

示例二：

我们还可以在 index.js 文件中注册全局组件：

import Vue from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

Vue.component('my-component', MyComponent);

new Vue({
  el: '#app',
  render: h => h(App)
});

在上述代码中，我们注册了一个名为 my-component 的全局组件，并在 App.vue 文件中使用了这个组件。

局部组件的注册方式

与全局组件不同，局部组件只在某个组件内部使用，因此它可以作为这个组件的私有组件。我们可以在父组件中通过 components 选项来注册子组件。

示例一：

import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';

export default {
  name: 'App',
  components: {
    'my-component': MyComponent
  }
}

在上述代码中，我们注册了一个名为 my-component 的局部组件，并将其作为 App.vue 的子组件使用。

示例二：

我们还可以在子组件的 script 标签中局部注册组件：

import MyOtherComponent from './MyOtherComponent.vue';

export default {
  name: 'MyComponent',
  components: {
    'my-other-component': MyOtherComponent
  }
}

在上述代码中，我们在 MyComponent.vue 文件中局部注册了一个名为 my-other-component 的子组件。