Vue2学习之组件与props
组件
什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。
vue中的组件开发
vue 是一个支持组件化开发的前端框架。
vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
vue组件的三个组成部分
template
这里有一个需要注意的点是，在整个template标签当中，只能包含一个根元素，如果有多个根元素，则报错。所以建议的写法是创建一个组件，那么就应该在template标签内先写上一个div标签。
script
.vue组件中的data必须是函数
不能用上面的形式写，必须写成函数：
如果有方法，则和之前一样，与data平级：
还有其他的什么侦听器啊计算属性啊都可以像methods一样放。
style
让style中支持less语法
组件之间的父子关系
三个组件之间原本是没有任何关系的，但在使用的时候我们可以人为的给它们提供关系。比如我们现在要在App组件中使用Left组件和Right组件，那么App组件就应该是这俩组件的父组件。
使用组件的三个步骤
那么如何让它们产生联系？
用下面的方式可以做到。
上面的注册组件有一个点需要注意：
就是完整的写法应该像上面这样以键值对形式写，但是因为是一样的所以我们简写成了Left，这个要注意。
同时也要注意：@指的是./src，这个在webpack里面单独讲过。
通过components注册是私有组件
全局注册组件
当某个组件频繁被用到，那么我们就可以注册全局组件。
组件的props
为什么需要props？看下面一个例子：
其中Count是一个可复用的组件，在这个Demo中被作为Left.vue和Right.vue的子组件使用，现在我们在这个组件中实现了一个点击按钮自增+1的效果。
但是我们知道，因为Count组件中的count默认初始值为0，所以对应到各自的父组件中则也是0。
那我们现在有一个需求是，想让父组件自主的去操作count属性，怎么办呢？比如我想让Left组件的count初始值为0，让Right组件的count初始值为9，怎么办呢？
这个时候就需要组件之间传值来完成，Vue中用props属性来完成这种操作。
用props来实现我们刚刚的操作：
用props中的自定义属性init来接收父组件的传值，然后将传过来的值渲染到template中即可。
在父组件中若想传值则可直接在组件标签内部使用kv键值对形式赋值就行。
上面的代码中：init="6"实质上是传递的字符串，如果想传递整形值，则应该用v-bind绑定，因为v-bind绑定属性时使用的js的语法格式，此时如果想传递字符串则应该再加个''单引号。
所以上面应该写成：
prop是只读的
可以这样写是因为this（也就是当前Vue组件的实例对象）中是有init，也就是我们的自定义属性，所以可以用this.的方式将其取出来赋值给count，因为count是可读可写的，而init是只读的。
props的default默认值
props的type值类型
props的required必填项
组件之间的样式冲突问题
如何解决组件样式冲突的问题
style节点的scope属性
/deep/样式穿透
这个东西在用到第三方组件库的时候会频繁用到：
