定义

组件化开发指的是：根据封装的思想，把页面上可复用的UI结构封装为组件，从而方便项目的开发和维护。

vue是一个支持组件化开发的前端框架，并且规定，组件的后缀名是.vue。

组件的三个组成部分：

template 组件的模板结构  是容器标签，只起到包裹性质的作用，只能包含唯一的根节点。

script      组件的js行为  封装组件的javaScript业务逻辑。export default ( ) 固定写法。表示导出的对象。

style     组件的样式  lang=' less '  scoped属性

其中每个组件中必须包含template模板结构，而  script 和 style 样式是可选的组成部分。

注意：

vue组件  中的data必须是一个函数，不能直接指向一个数据对象，因为可能会导致多个组件公用同一份数据的问题。

---

组件中的父子级关系。在封装好之后是不存在父子级关系的，在使用组建的时候，根据彼此的嵌套关系形成了父子级关系、兄弟关系。

---

使用组件的三个步骤：

①使用import语法导入需要的组件

导入组件

②使用components节点注册组件

注册组件在components中

③以标签形式使用刚才注册的组件

标签写进‘容器’中

通过compontents注册的是私有组件

全局组件通过 Vue.compontent()方法 在Vue.js入口文件中编辑

全局组件的使用

---

组件的props

它是组件的自定义属性，合理的使用props可以极大的提高组建的复用性。（只读）

程序员是不能对props值进行直接修改的，否则会报错，如果想要更改，那么久要把props的值转存到data中，因为data中的数是可读可写的。

props值转存到data中

两种格式：数组  对象

数组：props [' init ']

对象：

对象格式

除了 default 属性之外 还有 type 定义属性的值类型  和  required 属性设置为必填项。

---

如何解决组件样式的冲突问题

原理是通过给每个组件分配唯一的自定义属性data-v-xxxx，通过属性选择器来控制样式的作用域

在style标签中添加  scoped 属性。