Vue之组件化（一）
一、组件化思想
1.1、组件化思想
遇到一大堆复杂的问题时，直接上手解决的话是非常困难的。面对这种情况，我们可以将这个大问题细分成许多小问题，逐一的去研究解决这些小问题，累积下来，这个大问题也会被我们解决。
上述的思想就类似组件化的思想。 当我们要完成一个页面的功能时，直接创建一个Vue.js就开始编写代码的话，不仅逻辑复杂，而且后期也不好维护。 所以，要将一个页面划分成几个个小功能，完成这些小功能后，再将这个功能集成到页面中，当然，这些划分出的小功能也可以根据逻辑的复杂度再进行细分。
1.根据逻辑要求将页面划分成三个组件
2.计划独立完成各个组件的功能后，再集成到页面中
3.在完成每个组件时，可以根据逻辑再次细分组件，最后将每个完成的组件集成至页面
1.2、简述组件化的使用
1.生成组件构造器对象 2.注册组件 3.使用组件
二、组件化的基本使用过程
组件化的引入
如果想在页面中展示4次改代码。
通常的做法是，将该代码复制4次，最后在页面展示4个同样的效果。
但是，当我想要重复利用的模块，是由相对复杂的代码构成的，再次用复制的方法就会让代码结构变得复杂，不利于维护。
这时，就要引入组件化的使用。
组件化的使用过程：
2.1.生成组件构造器对象
用Vue的extend的方法生成组件构造器
extends()中的参数也是一个对象，对象中有一个template属性，template的属性值存储的就是我们想利用的组件模板的代码。 template的属性值是字符串类型，用ES6语法``(Tab键上的一个键)显示，可以对字符串换行的情况不做处理。ES5中字符串换行时，要用+进行拼接
const myC = Vue.extend({
template:`
<div>
<h2>hello</h2>
<p>你好</p>
</div>`
})2.2.注册组件
利用Vue的component方法注册组件。
component方法中要传入两个参数， 1.使用组件模板的标签 2.组件构造器对象
Vue.component('my-component',myC );3.3.使用组件
用注册组件时的标签使用组件模板
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
三、初用组件化遇坑总结
3.1.template模板中的HTML代码必须要有一个根标签
const myC = Vue.extend({
template:`
<h2>hello</h2>
<p>你好</p>`
})h2和p标签没有一个根标签 只展示了h2标签
报错信息：
3.2.创建Vue实例的代码要放在组件化代码的后面
报错信息：警告没有提供正确注册组件化标签名
正常运行：
3.3.注册组件的标签命名问题
1.注册组件的标签用小驼峰命名时，在html中使用组件时，要用-隔开
标签名用小驼峰命名法myCom
当html中使用组件时没用-隔开
mycom和myCom没有区别，html不区分大小写
报错：提示要提供正确的标签名
用-隔开后
正常显示
总结注册组件的标签名命名问题 1.注册组件时用小驼峰命名法时，html中使用组件时要用-隔开 2.注册组件时，组件的标签名可以都用小写，不要出现大写字母
四、全局组件和局部组件
4.1、全局组件
全局组件可以在多个Vue实例对象中使用
<div id="app1">
<!--3.使用全局组件-->
<my-c></my-c>
</div>
<div id="app2">
<!--3.使用全局组件-->
<my-c></my-c>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*1.创建组件构造器*/
const myC = Vue.extend({
template: `
<div>
<h2>全局组件</h2>
</div>`
})
/*2.注册组件*/
Vue.component('my-c',myC);
/*Vue的实例化对象1*/
const app1 = new Vue({
el: '#app1'
})
/*Vue的实例化对象2*/
const app2 = new Vue({
el: '#app2'
})
</script>在两个Vue实例对象app1和app2中都能使用全局组件
4.2.局部组件（常用）
局部组件创建在Vue实例中，该组件也只能在该实例中使用 局部组件的创建方法： 1.生成组件构造器 2.在Vue实例中注册组件 注册组件在Vue的components属性中操作
/*1.生成组件构造器*/
const myCom = Vue.extend({
template: `
<div>
<h2>局部组件</h2>
</div>`
})
/*Vue的实例化对象1*/
/*2.在Vue实例中注册组件*/
const app1 = new Vue({
el: '#app1',
components: {
myc:myCom
}
})myc就是注册组件的标签名 myCom就是组件构造器
在app1和app2中都使用全局组件和局部组件
<div id="app1">
<!--3.使用全局组件-->
<my-c></my-c>
<!--使用局部组件-->
<myc></myc>
</div>
<div id="app2">
<!--3.使用全局组件-->
<my-c></my-c>
<!--使用局部组件-->
<myc></myc>
</div>
全局组件在两个Vue实例中都可以显示 局部组件只能在注册他的Vue实例app1中显示 在app2中使用局部组件,标签不会被解析