详解vue 组件注册

绝大多数 Vue 项目中，你都需要定义自己的组件。在文档中，Vue 组件被描述为可复用的 Vue 实例，因为它们实际上就是 Vue 实例，接受相同的选项对象 (除了一些根实例特有的选项)。

组件系统是 Vue 的核心特性之一，它使构建大型应用程序变得更加容易。

全局注册组件

在 Vue 应用程序中注册一个全局组件非常简单，只需要调用 Vue.component 函数并提供组件名称和组件选项对象即可。

在下面的示例中，我们将定义一个名为 "hello-world" 的全局组件：

Vue.component('hello-world', {
  template: '<p>Hello World!</p>'
})

现在，可以在任何你希望使用该组件的 Vue 实例中，直接通过组件标签使用它了：

<template>
  <div>
    <hello-world></hello-world>
  </div>
</template>

局部注册组件

除了在全局作用域中注册组件，你还可以在.vue 组件中注册组件。

可以使用组件选项对象的 components 属性，在局部注册的组件中注册子组件。

下面是一个示例：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    'my-component': MyComponent
  }
};
</script>

在小的应用程序中，这显然比全局注册要好得多。这样做有效地避免潜在的命名冲突，并且可以使组件树更加清晰易懂。

总之，Vue 的组件系统允许你以声明式方式编写应用程序，从而使你的代码更易于理解和维护。