什么是组件

组件的出现，就是为了拆分Vue实列的代码里的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个每个功能模块的职能一致。
组件化：是从UI界面的角度进行规划；前端的组件化，方便UI组件的重用。

全局组件定义的三种方式

第一种

 <div id="app">
        <!-- 如果要使用组件，直接把组件的名称，以HTML标签形式，引入到页面中即可 -->
    <mycom1></mycom1>
    </div>

<script>
        var com1 = Vue.extend({
        template:'<h3>使用Vue.extend 来创建全局的Vue组件</h3>'
        })
        //1,使用Vue.component('组件名'，创建出来的组件模板对象)
        Vue.component('mycom1',com1)
 </script>

第二种

<script>
Vue.component('mycom2',{template:'<div><h3>使用Vue.component 创建出来的组件</h3>s<span>template</span></div>'
        })
</script>

第三种

<templat id="temp">
 <div>
   <h1>通过templat元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
   <h4>好用，不错</h4>
  </div>
</templat>

<script>
 Vue.component('mycom2',{
            template:'temp'
        })
</script>

注意：不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素。

在工作项目开发中第三种方法最好用

24vue学习——vue的组件的基础学习（组件化和模块化的区别）

前言

我们前面学习很多关于 vue 的知识了，下面让我们来学习 vue 中一个重要的知识点——组件。这篇文章我们就来看看组件到底是什么吧。

1.组件的定义：

（1）官方的定义： 组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
（2）我自己的理解：组件的出现就是为了拆分 vue 实例的代码量，能够让我们以不同的组件
来划分不同的功能模块。将来我们需要什么功能，就可以去调用对应的组件即可。

2.组件化和模块化的区别：

（1）组件化：是从UI界面进行划分的——前端的组件化可以方便 UI界面的重用
（2）模块化：是从代码逻辑的角度进行划分的——方便后台代码的分层开发，保证每个功能模块的智能单一。

3.组件化实例讲解：

在上图中，八个红色方框内的内容都是类似的——背景圆 + 图标 + 标题组成的，但是我们在写这个界面的时候需要重复写同样的内容写 8 次吗？当然不用，这就需要用到 vue 的组件化的知识了，我们可以将这样的一个结构写为一个组件，传入对应的图标和标题即可。方便 UI界面的重用，使我们的代码更加的简洁。

最近接触Vue写项目，这是对于Vue中的两个关键的部分我自身的一些理解。希望能对大家有一定的帮助。当然，其中一些描述，可能不太准确，还请大家多多指出错误的地方。🙌🙌🙌🙌

1.1模块化

​ 我们说Vue项目是按照模块进行划分的，那么什么是模块呢？

模块化，就相当于我们网站的导航栏，那么每一个导航项就可以看作是如下图片中提到的

• 模块化，就好比是一个大的功能项，那么这个大的功能项又可以包含多个组件。

• 在使用的时候，单个模块对应的是我们Vue项目下compentent下的文件目录

• 每一个模块下面又可以有多个组件，这些组件又组成了完整的模块页面（单页面）

• 但是每一个模块下面必须要有一个主要的文件（模块父组件），这个文件必须在路由管理中（router/index.js）进行注册，注册的时候满足以下形式：

export default new Router({
  mode: 'history',
  routes: [
		{
      path: '/',
      name: 'Default',
      redirect: '/home',
      component: Home
    }]
    })

​ 其余的组件可以通过以下的方式进行注入使用。在使用的时候，将组件的name属性中的名称在父组件中进行标签化处理（vue会将以驼峰命名的名称进行转化--------（BookManager——>book-manager））

• 首先要在用到的页面中的中通过import进行导入
• 其次需要在compent中进行注册,注册的时候会使用组件的name属性进行注入

1.2 组件

​ 什么是组件呢？用一种通俗的方式进行讲解。大家都玩过积木吧？想象一下，我们现在要拼的是一个人物形象。那么现在这个人物就好比是一个模块，而人的四肢、头部等零散的部件就相当于是组件。组件是模块的拆分。是组成一个完整的单页面必不可少的部分。那么我们需要将组件创建出来，然后将它放在合适的位置上，才能最终做出一个完整的人物形象。希望这样讲解能对观看这篇文章的读者有一定的启发。。。✌✌✌