第五章 Vue组件化

5.1 组件的概念

组件（component） 是 Vue.js 最强大的功能之一。
Vue 中的组件化开发就是把网页的重复代码抽取出来 ，封装成一个个可复用的视图组件，然后将这些视图组件拼接到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率。
通常一套系统会以一棵嵌套的组件树的形式来组织：

例如：项目可能会有头部、底部、页侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件

• 组件就是对局部视图的封装，每个组件包含了：
  HTML 结构
  CSS 样式
  JavaScript 行为:data 数据,methods 行为

• 提高开发效率，增强可维护性，更好的去解决软件上的高耦合、低内聚、无重用的3大代码问题

• Vue 中的组件思想借鉴于 React

• 目前主流的前端框架：Angular、React 、Vue 都是组件化开发思想

5.2 组件的基本使用

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。
有两种组件的注册类型：全局注册和局部注册

5.2.1 全局注册

5.2.1.1 介绍

一般把网页中特殊的公共部分注册为全局组件：轮播图、分页、通用导航栏
全局注册之后，可以在任何新创建的 Vue 实例 (new Vue) 的模板中使用
简单格式：
说明：
           组件名：

              - 可使用驼峰(camelCase)或者横线分隔(kebab-case)命名方式

              - 但 DOM 中只能使用横线分隔方式进行引用组件
              - 官方强烈推荐组件名字母全小写且必须包含一个连字符

            template：定义组件的视图模板
            data ：在组件中必须是一个函数

5.2.1.2 示例

5.2.2 局部注册（子组件）

5.2.2.1 介绍

一般把一些非通用部分注册为局部组件，一般只适用于当前项目的
格式：

5.2.2.2 示例

5.2.3 总结

• 组件是可复用的 Vue 实例，不需要手动实例化
• 与 new Vue 接收相同的选项，例如 data 、 computed 、 watch 、 methods 等
• 组件的 data 选项必须是一个函数

5.3 组件化注意事项

• 组件可以理解为特殊的 Vue 实例，不需要手动实例化，管理自己的 template 模板
• 组件的 template 必须有且只有一个根节点
• 组件的 data 选项必须是函数,且函数体返回一个对象
• 组件与组件之间是相互独立的，可以配置自己的一些选项资源 data、methods、computed 等等
• 思想：组件自己管理自己，不影响别人

5.4 Vue 父子组件间通信

5.4.1 组件间通信方式

1. props 父组件向子组件传递数据
2. $emit 自定义事件
3. slot 插槽分发内容

5.4.2 组件间通信规则

1. 不要在子组件中直接修改父组件传递的数据
2. 数据初始化时，应当看初始化的数据是否用于多个组件中，如果需要被用于多个组件中，则初始化在父组件中；如果只在一个组件中使用，那就初始化在这个要使用的组件中。
3. 数据初始化在哪个组件, 更新数据的方法(函数)就应该定义在哪个组件。

5.4.3 props 向子组件传递数据

5.4.3.1 声明组件对象中定义 props

1. 在声明组件对象中使用 props 选项指定
   
   方式1：指定传递属性名，注意是 数组形式
   
   方式2：指定传递属性名和数据类型，注意是 对象形式
   
   方式3：指定属性名、数据类型、必要性、默认值
   

5.4.3.2 引用组件时动态赋值

在引用组件时，通过 v-bind 动态赋值

5.4.3.3 传递数据注意

1. props 只用于父组件向子组件传递数据
2. 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
3. 问题:
   a. 如果需要向非子后代传递数据，必须多层逐层传递
   b. 兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

5.4.4 自定义事件

作用：通过 自定义事件 来代替 props 传入函数形式

5.4.4.1 绑定自定义事件

在父组件中定义事件监听函数，并引用子组件标签上 v-on 绑定事件监听。

5.4.4.2 触发监听事件函数执行

在子组件中触发父组件的监听事件函数调用

5.4.4.3 自定义事件注意

1. 自定义事件只用于子组件向父组件发送消息(数据)
2. 隔代组件或兄弟组件间通信此种方式不合适

5.4.5 slot 插槽

作用: 主要用于父组件向子组件传递 标签+数据 , （而上面prop和自定事件只是传递数据）
场景：一般是某个位置需要经常动态切换显示效果

5.4.5.1 子组件定义插槽

在子组件中定义插槽, 当父组件向指定插槽传递标签数据后, 插槽处就被渲染，否则插槽处不会被渲染.

5.4.5.2 父组件传递标签数据

5.4.5.3 插槽注意事项

1. 只能用于父组件向子组件传递 标签+数据
2. 传递的插槽标签中的数据处理都需要定义所在父组件中