Vue组件化开发（笔记一）

组件化开发步骤：
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此同一个组件实例来验证以下，点击每个按钮，他们都是相互独立的，互不影响。

我们可以看见效果，每个小组键都是互相独立使用data函数定义的count，每次返回的都是一个新的对象，这就是组件复用，组件之间在哪里调用或者调用几次都不会相互影响，更不会产生连锁反应。

父子组件通信传递的问题

首先我们得明确，通过上面的例子发现，我们的子组件并不能引用和访问父组件或者Vue实例定义的数据。
但实际上，我们有这样一种需求，数据确实需要从上层传递到下层，我们从服务器请求了很多很多的数据回来，其中有一部分的数据，并非我们在整个页面的的大组件进行展示的，而是单纯想要给下面的子组件来进行展示。
这个时候呢，父组件并不会再让子组件发送一个网络请求，而是将父组件（大组件）中请求到的数据直接传递给小组件（子组件）。

父子组件间是如何进行传值（数据通信的呢）？
1.父组件通过props向子组件传递数据(这里的props是properties的缩写，属性的意思)
2.子组件通过自定义事件向父组件发送消息(emit，发射的意思)

下面是代码图展示。
父传子代码

关于父传子props的写法，有很多种常见类型。

第一种是props:[ ]数组类型
第二种是对象类型{}

父传子props有2个bug，驼峰命名标识，要用短横杠代替（脚手架不会限制，只有HTML代码会这样，所以HTML代码里面不要写驼峰，不然很致命，建议所有命名都小写），定义子组件模板的时候，必须有一个根节点，必须被根节点包裹，default默认值的好处是，页面报错的时候，会把默认值渲染到页面上。

驼峰标识用短横杠代替

如果组件模板中没有根节点，缺失了我红色框选的一对div标签的话，会报如下错误，因为div作为根节点包裹他下面的所有标签。

子级向父级传递（当子组件需要向父组件传递数据时一般用自定义事件来完成，用v-on指令监听dom事件）

自定义事件的流程：
在子组件中，通过过$emit()来向外发射触发事件，告诉父组件用户把我干嘛了（我被被点击了）。
在父组件中，父组件通过v-on来监听子组件触发事件，这时候的父组件已经收到了消息是儿子发过来的消息（并且做出相应的回应）

逻辑图：