Vue组件概念以及全局组件定义

组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不能的功能木块，将来需要什么样的功能，就可以去调用

组件和模块化的不同：

模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块只能单一

组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用。

组件有三种定义方式：

其中，Vue.extend，是属于vue的全局API，在实际开发中很少用到，相比常用的Vue.component写法，用extend步骤更加麻烦

我们就介绍Vue.compenent组件的做法。

全局组件的定义方式

1、通过Vue.component('自定义组件名',{配置项})

　　组件名：如果都是小写字母，则在使用组件时直接写即可，作为标签直接写

　　　　如果组件使用驼峰命名，在使用组件的时候，必须把大写字母转换为小写字母，而且使用-分割

　　配置项：

　　　　template:用来定义组件模板

　　　　template配置项中只能有一个根标签，如果有多个根标签，只展示第一个根标签

　　　　官方推荐中，上来先写一个div以后的东西都写到div中

　　使用组件：把组件当做标签使用

如下：

　　　　在这里我们定义了login组件
       Vue.component('login', {
           template:'<div><h1>登录组件</h1></div>'
       });

 在html直接使用标签的方式调用组件
<login></login>

       定义了大小写混合的组件写法
        Vue.component('userList', {
           template:'<div><h1>用户列表组件</h1></div>'
       })

在调用的时候，要都转为小写，且在大写的字母上用-代替       
 <user-list></user-list>

方式二：采用直接定义的方式来调用，就是先声明组件名和定义component的时候分开来写，如下：

        //通过直接定义来配置vue组件，这种写法是我们后面用的最多的，其更加的方便
       let register = {
           template: "<div><h1>注册组件</h1></div>"
       }
       Vue.component('register',register)

 <register></register>

上述两种定义方式都存在弊端，就是需要在字符串中需要定义大量的html，很难看，也不好维护，需要拼。

我们把html模板定义在一个template标签中，template配置项定义template的id，就可以解决这个问题了，如下：

      在template中直接定义id
     //定义导航组件
       let main_nav = {
           template : "#main_nav",
       }
       Vue.component('main_nav',main_nav)

    <!-- 定义组件模板 -->
    定义template标签，上面放上组件中的id，组件会过来找对应的temlate，并且这个template可以不放入vue实例挂载点中
    <template id="main_nav">
        <div>
            <ul>
                <li>首页</li>
                <li> 产品中心</li>
                <li>新品上市</li>
            </ul>
        </div>
    </template>

    <div id="app">
        <!-- 
            vue组件的三种定义方式
            2、Vue.component
         -->
        <login></login>
        <user-list></user-list>
        <register></register>
        <main_nav></main_nav> 在挂载点中使用组件
    </div>