浅入深出Vue之组件使用

在同一个项目中，尽可能保持统一风格

组件的注册

在另一个组件中如果需要使用其它自定义组件，那首先是需要将组件注册。

而注册分为：

局部注册
全局注册

局部注册

局部注册的用法：

<template>
  <div>
    <!-- 第三步： 在页面中使用 -->
    <hello-world></hello-world>
  </div>
</template>
<script>
// 第一步：引入组件
import HelloWorld from 'your/component/path'
export default {
  // 第二步：在当前组件注册此组件，注册之后才可以在页面中使用
  components: [
    HelloWorld
  ]}
</script>

上图我们可以看到，在单文件组件中局部注册的使用步骤：

将组件引入
在当前组件中注册，这一步也就体现了局部二字，因为注册后的作用域仅在当前组件内。
在视图中使用

全局注册

如果这个 HelloWorld组件是经常要用的一个 UI组件怎么办，如果使用局部注册那意味着每个组件中都将存在第一步和第二步的重复代码。

看见重复代码，我们应该形成一种想要干掉它的本能。因为重复代码属于项目中的坏味道，会让项目的整体质量下降，并且直接影响项目的可维护性和可扩展性。

想想，当这个项目非常庞大，庞大到这个基础组件已经被成百上千个组件引用了，哪天你要改这个组件的文件名或者移动路径时，将是一场灾难。

因此，在 vue中提供了全局注册的办法。只需注册一次，剩余组件中第一步和第二步的代码就可以直接删掉，因为全局注册之后可以直接在视图中使用。

// main.js 入口文件，在创建根实例之前将其注册
import HelloWorld from 'your/component/path'
Vue.component('HelloWorld', HelloWorld)
new Vue({
  ...
})

但是这种手动全局注册单个组件也存在一个问题：

不够自动化，当组件数量繁多时，手动注册组件就又成了一个负担

这里童鞋们可以思考思考如何在 vue中实现自动全局注册组件。

写在后面

组件系统所包含的内容是相当丰富的，三言两语很难说完整，因此这里只提组件最基础的使用和注册以及在实践中会遇到的问题。

下一篇将会详细的说明子组件及在其上进行数据传递的相关知识，同样，也是以理论为主。也是作为基础篇的最后一篇~

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对软件开发网的支持。