一、什么是组件化
在Vue中，组件化开发是一个很重要的部分，那么什么是组件化开发呢？
大家有没有发现，当我们的代码逐渐变多的时候，我们让后人阅读我们的代码寻找什么功能的时候会变得很复杂，这时组件化开发的优势就显现出来了。把一个复杂的程序分解成几部分分别开发，分解后的几部分还可以继续分解成更多部分分别开发，每一个部分实现一个功能块，即组件化。
简单点说，一辆汽车有发动机，驾驶舱，轮胎等等部件，而设计师在设计他的时候一定是分开由不同工序来制作，最后各部分制作完成再拼接到一起，而一些复杂的部分，比如驾驶舱里的方向盘，座椅等又需要不同的工序来制作，最后拼接到一起，这就类似于Vue中的组件化开发了。
组件化开发有利于后期代码的阅读和维护，也是Vue中的重要部分。
二、注册组件的基本步骤
1、调用Vue.extend()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
</div>
<script src="./vue.js"></script>
<script>
//ES6语法
/* Tab键上面的那个点，功能类似单引号和双引号，但功能更强大，因为可以换行 */
//1、创建组件构造器对象
const cpnC/* ontructor */ = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
<p>我也是内容</p>
</div>`
})
//2、注册组件
const app = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
2、调用Vue.component()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script src="./vue.js"></script>
<script>
//ES6语法
/* Tab键上面的那个点，功能类似单引号和双引号，但功能更强大，因为可以换行 */
//1、创建组件构造器对象
const cpnC/* ontructor */ = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
<p>我也是内容</p>
</div>`
})
//2、注册组件
Vue.component('my-cpn',cpnC)
const app = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
3、在Vue实例的作用范围内使用组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 3、使用组件 -->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script src="./vue.js"></script>
<script>
//ES6语法
/* Tab键上面的那个点，功能类似单引号和双引号，但功能更强大，因为可以换行 */
//1、创建组件构造器对象
const cpnC/* ontructor */ = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
<p>我也是内容</p>
</div>`
})
//2、注册组件
Vue.component('my-cpn',cpnC)
const app = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
三、全局组件与局部组件
以上案例为全局组件，所谓全局组件，就是在多个Vue实例下面使用，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app2">
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<div id="app">
<!-- 3、使用组件 -->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script src="./vue.js"></script>
<script>
//ES6语法
/* Tab键上面的那个点，功能类似单引号和双引号，但功能更强大，因为可以换行 */
//1、创建组件构造器对象
const cpnC/* ontructor */ = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
<p>我也是内容</p>
</div>`
})
//2、注册组件
Vue.component('my-cpn',cpnC)
const app = new Vue({
el:'#app',
data:{
}
})
const app2 = new Vue({
el:'#app2',
})
</script>
</body>
</html>
我添加了一个id为app2的Vue实例，然后在app2下面又调用了，且能够调用成功，这个就是全局组件。
那么我们怎么才能注册局部组件呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app2">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<div id="app">
<!-- 3、使用组件 -->
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<script src="./vue.js"></script>
<script>
const cpnC= Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
<p>我也是内容</p>
</div>`
})
const app = new Vue({
el:'#app',
components:{ //components，即组件
//cpn为使用组件时的标签名
cpn: cpnC
}
})
const app2 = new Vue({
el:'#app2',
})
</script>
</body>
</html>
上面的例子就是创建局部组件的例子，我在其中一个id为"app"Vue实例下创建局部组件，那么就只有在id为“app”的标签下才可以调用这个组件。
在实际开发中，优先使用局部组件。
四、父组件与子组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 3、使用组件 -->
<cpn2></cpn2>
</div>
<script src="./vue.js"></script>
<!-- 1、构建第一个组件构造器 -->
<script>
const cpnC1 = Vue.extend({
template:`
<div>
<h2>我是标题1</h2>
<p>我是内容</p>
</div>
`
})
<!-- 构建第二个组件构造器 -->
const cpnC2 = Vue.extend({
template:`
<div>
<h2>我是标题二</h2>
<p>我是内容二</p>
<cpn1></cpn1>
</div>
`,
components:{
cpn1:cpnC1
}
})
//root组件
const app = new Vue({
el:'#app',
data:{
message:'你好啊'
},
components:{
cpn2: cpnC2
}
})
</script>
</script>
</body>
</html>
五、注册组件的语法糖
全局组件的语法糖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 3、使用组件 -->
<cpn1></cpn1>
</div>
<script src="./vue.js"></script>
<!-- 1、构建第一个组件构造器 -->
<script>
/* 全局组件语法糖 */
Vue.component('cpn1',{
template:`
<div>
<h2>我是标题1</h2>
<p>我是内容</p>
</div>
`
})
/* const cpnC1 = Vue.extend() */
//root组件
const app = new Vue({
el:'#app',
data:{
message:'你好啊'
}
})
</script>
</script>
</body>
</html>
