什么是组件化？
如果将一个复杂的问题，拆分成很多个可以处理的小问 题，再将其放在整体当中，你会发现大的问题也会迎刃 而解，那么组件化开发也是类似于这样的思想：
如果我们将一个页面中所有的处理逻辑全部放在一 起，处理起来就会变得非常复杂，而且不利于后续 的管理以及扩展。但如果，我们将一个页面拆分成一个个小的功能块， 每个功能块完成属于自己这部分独立的功能，那么 之后整个页面的管理和维护就变得非常容易了。
组件化是Vue.js中的重要思想
它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
任何的应用都会被抽象成一颗组件树。
有了组件化的思想，我们在之后的开发中就要充分的利用它。
尽可能的将页面拆分成一个个小的、可复用的组件。
这样让我们的代码更加方便组织和管理，并且扩展性也更强。
注册组件的基本步骤
组件的使用分成三个步骤：
1 创建组件构造器 2 注册组件 3 使用组件。
就是类似于这样。
实现：
<div id="app"> <!-- 这个m-title 是我自己定义的，可以用多次 --> <m-title></m-title> </div> <!-- 在外面无效 我也不知道为什么 学到后面会讲解 --> <m-title></m-title> <script src="js/vue.js"></script> <script> <!-- 1.创建组件构造器 --> const test = Vue.extend({ template:` <div> <h2>我是h2</h2> </div> ` }) //注册组件 Vue.component('m-title',test) const app = new Vue({ el:"#app", data:{ s1:"a" } }) </script>
注意！ 内个ES6写法写内个代码是 `` 不是单引号，是波浪线内个键盘 .
老师说 可移植性很高 甚至可以跨工程
其实 上面的 在VUE2.x之后就看不到了，上面的写法是最原始的，而且上面的是 用的是 “全局组件”
全局组件 和 局部组件：
如果有两个Vue 实例，那么我注册的m-title 这个组件是全局的话 ，在那个实例都可以用，例如：
<div id="app"> 我是app1 因为m-title是全局组件 大家都可以直接用 <m-title></m-title> <hr> </div> <div id="app2"> 我是app2 因为m-title是全局组件 大家都可以直接用 <m-title></m-title> <hr> </div> <script src="js/vue.js"></script> <script> const test = Vue.extend({ template:` <div> <h2>我是h2</h2> <p>我是标题</p> </div> ` }) //注册组件 Vue.component('m-title',test) const app = new Vue({ el:"#app", }) const app2 = new Vue({ el:"#app2", }) </script>
即：
当我们通过调用Vue.component()注册组件时，组件的注册是全局的 这意味着该组件可以在任意Vue示例下使用。
如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件：
注册局部组件：
<body> <div id="app"> APP <cpn></cpn> <hr> </div> <div id="app2"> APP2 <cpn></cpn> <!--这个在这里写没用 因为cpn是局部组件 --> <hr> </div> <script src="js/vue.js"></script> <script> //创建组件构造器 const test = Vue.extend({ template:` <div> <h2>我是h2</h2> <p>我是标题</p> </div> ` }) /** 注册全局组件 【此处已注释】 Vue.component('m-title',test)*/ const app = new Vue({ el:"#app", /***用components 来注册挂成为局部组件【cpn只能在app区域中可用】 cpn是key（标签名） test是注册的组件*/ components:{ 'cpn':test } }) const app2 = new Vue({ el:"#app2" }) </script> </body>
还有一种写法貌似直接写进去的。
其实你可以去Vue官网LookLook