Vue day03

半场动画

beforeEnter

enter

afterEnter

组件

什么是组件化

当我们遇到复杂问题时，很难一次性搞定所有问题，所以这时需要把问题拆解，把小问题都解决后综合起来就能得到这个问题的解决方案，听起来很熟悉吧！其实在动态规划中就是这种思想了，只不过是最优解和解决方案的区分。

组件化也是这种解决问题的思路，当一个项目中的功能逻辑特别复杂时，我们很难一次性完成所有逻辑交互，因为容易发生冗余或回调地狱，一旦某一部分出错，很难追究到哪行代码出现问题。同时一个人的精力是有限的，为了减轻个人的压力，将问题分为小的功能模块，既可以减少管理和维护该界面的成本，也可以适合团队合作。

但其实 Vue 的前端开发不需要很多人，因为它是轻量级的，所以实际项目中只需要美工人员把设计好的原型发给一两个前端开发人员就行了，至于为什么需要这么少的开发人员，很大程度上因为 Vue 的组件化开发让业务逻辑更清晰。

vue 组件化思想

• 组件化的思想让我们能够开发出一个个独立且可复用的小组件来构造我们的应用。

• 每一个应用(功能)都可以抽象成一个组件树。

• 尽可能的将页面拆分成小且可复用的组件。这样让我们的代码更加方便组织和管理，并且扩展性也更强。

vue 组件化的好处

1. 组件是独立和可复用的代码组织单元。组件系统是 vue 核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用；

2. 组件化开发能大幅度提高应用开发效率、测试性、复用性等；

3. 能让 web 前端代码实现“高内聚 低耦合”，使得前端开发的过程变成搭积木的过程。

组件的基本使用

1. 定义组件

2. 注册组件

• 组件的命名规则：
  • 可以是驼峰式，渲染的时候需要写成全小写并设置连接符 如： MyHeader ---> my-header
  • 可以是全小写，渲染的时候直接渲染即可
  • 可以是首字母大写，渲染的时候直接渲染即可，或者全小写

3. 渲染组件

   1. 以组件的名称作为标签直接渲染

   2. 以component渲染，通过 is属性指定渲染的组件，该写法一般用于动态切换组件

组件中的 data 为什么是一个 function

• 为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，

• 如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；

• 而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

组件切换

component

组件通信（9 种方式）

每个组件的数据都是独立的，组件之间通信需要按照一定的方式传递数据

父传子

1. 在渲染的子组件上使用 v-bind 的方式传递父组件的数据

2. 在子组件中使用 props 接受传递的数据

子传父

1. 在渲染的子组件上使用 v-on 的方式监听父组件的函数

2. 在子组件中使用$emit 的方式调用函数，调用的同时传递子组件的数据

兄弟组件传值（事件总线）

b --> a

1. 创建一个空的 vue 实例 （eventBus）

2. 在组件 a 中使用 $on 的方式监听函数

3. 在组件 b 中使用 $emit 调用函数，调用的同时传递数据

爷孙传值 $attrs、$listeners

跨多组件传值 provide、inject

$refs、$parent