组件化开发步骤：
1.创建组件构造器 Vue.extend({})
2.注册组件 Vue.component()
3.使用组件
创建组件的构造器对象，Vue对象提供了Vue.extend( )方法,可以用来创建构造器,括号里面放置一个参数，这个参数是个对象类型，和我们创建vue的实例一样，new Vue({ })。
全局组件时是Vue.component()，局部组件时是components: { }
上面的这种组件是全局注册，意味着可以在多个Vue实例下使用。
组件的局部注册（开发里面用得最多的），在Vue实例里面注册就叫局部注册（而全局组件是在Vue实例之外注册的，看上面的截图可以看到）。
父组件和子组件的关系（理清谁在谁里面注册，谁在谁里面使用组件，也就是我们常常碰到的作用域问题）
组件注册的语法糖，因为Vue2.0版本后，已经很少使用Vue.extend({})创建构造器的写法了。
全局组件语法糖写法：
注册局部组件的语法糖：
这种语法糖注册组件，整个代码页面看起来非常眼花缭乱，让人维护傻傻分不清，所以我们Vue提供了组件模板抽离的写法（当我们学习了Vue提供的脚手架的模板抽离方法之后，脚手架那个会更好。）
第一种模板抽离方法：script标签，type类型必须是text/x-template
不过上面这种模板抽离很少用（不推荐）。
第二种模板分离写法：template标签形式
组件的template模板可以访问Vue实例数据吗？不能。
vue实例里面定义的数据，只能在绑定对应的挂载点上使用，而组件模板是不能使用vue实例定义的数据的，专业术语：组件不能访问vue实例。
组件是一个单独功能模块的封装，他有属于自己的template模板，还有component，自然也应该有自己存放的属性data，只不过这个data不再是一个属性对象的形式，而应该是函数，并且还有一个return返回对象。
如果是对象形式的data
,会报这个错误
报错信息提示我们，data应该是一个函数，并且return回一个值。
下面来看下组件模板访问自己的data
通过上述的例子，其实组件的原型是指向vue的，我们发现组件内部其实也是一个vue实例，组件里面既然可以有template,data,component,相对的像vue实例里面的methods,computed在组件里面也是可以使用的。
我们会想到，组件中的data为什么必须是一个函数？
函数形式的data保证了组件实例的相互独立性。
我们这里调用3此同一个组件实例来验证以下，点击每个按钮，他们都是相互独立的，互不影响。
<div id="app">
<mycom2></mycom2>
<mycom2></mycom2>
<mycom2></mycom2>
</div>
<!--使用template标签来模板分离-->
<template id="temp">
<div>
<h2>计数器</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<h2>{{count}}</h2>
</div>
</template>
<script>
Vue.component('mycom2', {
template: `#temp`,
data() {
return {
count: 0
}
},
methods: {
increment () {
this.count++
},
decrement () {
this.count--
}
},
})
const app = new Vue({
el: '#app',
})
</script>
我们可以看见效果，每个小组键都是互相独立使用data函数定义的count，每次返回的都是一个新的对象，这就是组件复用，组件之间在哪里调用或者调用几次都不会相互影响，更不会产生连锁反应。
父子组件通信传递的问题
首先我们得明确，通过上面的例子发现，我们的子组件并不能引用和访问父组件或者Vue实例定义的数据。
但实际上，我们有这样一种需求，数据确实需要从上层传递到下层，我们从服务器请求了很多很多的数据回来，其中有一部分的数据，并非我们在整个页面的的大组件进行展示的，而是单纯想要给下面的子组件来进行展示。
这个时候呢，父组件并不会再让子组件发送一个网络请求，而是将父组件（大组件）中请求到的数据直接传递给小组件（子组件）。
父子组件间是如何进行传值（数据通信的呢）？
1.父组件通过props向子组件传递数据(这里的props是properties的缩写，属性的意思)
2.子组件通过自定义事件向父组件发送消息(emit，发射的意思)
下面是代码图展示。
父传子代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--这里是Vue实例的模板-->
<div id="app">
<mycom :Msg="msg" :Books="books"></mycom>
</div>
<!--这里是组件mycom的模板-->
<template id="mycom">
<div>
<h2>{{Msg}}</h2>
<p>{{Books}}</p>
<ul>
<li v-for="item in Books">{{item}}</li>
</ul>
</div>
</template>
<script>
//子组件
const mycom = {
template: '#mycom',
props: ['Msg', 'Books'],//传递的是变量，而不是字符串
data() {
return {
}
},
}
//将Vue实例作为父组件
const app = new Vue({
el: '#app',
data() {
return {
msg: 'hello',
books: ['措不及防的爱', '三生三世十里桃花', '芈月传', '那些年']
}
},
components: {
mycom,
}
})
</script>
</body>
</html>
关于父传子props的写法，有很多种常见类型。
第一种是props:[ ]数组类型
第二种是对象类型{}
父传子props有2个bug，驼峰命名标识，要用短横杠代替（脚手架不会限制，只有HTML代码会这样，所以HTML代码里面不要写驼峰，不然很致命，建议所有命名都小写），定义子组件模板的时候，必须有一个根节点，必须被根节点包裹，default默认值的好处是，页面报错的时候，会把默认值渲染到页面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!-- <mycom :myInfo="info" :myMessage="message"></mycom> （会报错） -->
<mycom :my-info="info" :my-message="message"></mycom>
</div>
<template id="mycom">
<div>
<h2>{{myInfo}}</h2>
<p>{{myMessage}}</p>
</div>
</template>
<script>
//子组件
const mycom = {
template: '#mycom',
props:{
myInfo: {
type: Object,
default () {
return {}
}
},
myMessage: {
type: String,
default: ''
}
},
data() {
return {
}
},
}
//将Vue实例作为父组件
const app = new Vue({
el: '#app',
data() {
return {
info: {
name: 'qinfubin',
age: 21,
height: 1.78
},
message: 'hello'
}
},
components: {
mycom,
}
})
</script>
</body>
</html>
驼峰标识用短横杠代替
如果组件模板中没有根节点，缺失了我红色框选的一对div标签的话，会报如下错误，因为div作为根节点包裹他下面的所有标签。
子级向父级传递（当子组件需要向父组件传递数据时一般用自定义事件来完成，用v-on指令监听dom事件）
自定义事件的流程：
在子组件中，通过过$emit()来向外发射触发事件，告诉父组件用户把我干嘛了（我被被点击了）。
在父组件中，父组件通过v-on来监听子组件触发事件，这时候的父组件已经收到了消息是儿子发过来的消息（并且做出相应的回应）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue实例模板（父组件） -->
<div id="app">
<!-- 调用已经注册的子组件 -->
<mycom @itemclick="myClick"></mycom>
</div>
<!-- 子组件模板 -->
<template id="mycom">
<div>
<button v-for="item in categories" @click="btnClick(item)">
{{item.name}}
</button>
</div>
</template>
<script>
//子组件
const mycom = {
template: '#mycom',
data() {
return {
categories:[
{id:'1',name:'热门推荐'},
{id:'2',name:'数码手机'},
{id:'3',name:'家用家电'},
{id:'4',name:'电脑办公'},
]
}
},
methods: {
btnClick (item) {
//console.log(item)
//发射事件
this.$emit('itemclick', item)
}
}
}
//将Vue实例作为父组件
const app = new Vue({
el: '#app',
components: {
mycom,//组件注册，语法糖+对象的增强写法
},
methods: {
myClick (item) {
console.log('myClick', item)
}
}
})
</script>
</body>
</html>
逻辑图：
