Vue中组件化和模块化的区别

什么是组件

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

组件化和模块化的不同：

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

全局组件定义的三种方式

第一种

 <div id="app">
        
    <mycom1>mycom1>
    div>

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

第二种

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

第三种

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

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

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

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