组件

什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的 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/样式穿透

这个东西在用到第三方组件库的时候会频繁用到：