Vue笔记：组件化

组件化

思想

• 人面对复杂问题的处理方式:
  1: 任何一个人处理信息的逻辑能力都是有限的
  2: 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。
  3:但是,我们人有一种天生的能力 ,就是将问题进行拆解。
  4:如果将一个复杂的问题 ,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃

• 组件化也是类似的思想

  1:如果我们将一个页面中所有的处理逻辑全部放在一
  起，处理起来就会变得非常复杂,而且不利于后续
  的管理以及扩展。
  2:但如果,我们讲一个页面拆分成一个个小的功能块,
  每个功能块完成属于自己这部分独立的功能,那么
  之后整个页面的管理和维护就变得非常容易了。

• 组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用，任何的应用都会被抽象成一颗组件树

使用步骤

创建组件构造器

注册组件

使用组件

组件不可以直接访问Vue实例的数据，不建议使用

组件里也有data属性

• 但是这个data类型不能是对象

模板这样写

全局组件

• 全局组件可以在多个Vue实例下使用

局部组件

动态组件

• is属性是哪个显示那个组件

父组件

• 一个组件要想使用，要么在全局注册过，要么在Vue实例下注册过
• 动态组件切换的时候会把以前的组件删除掉(页面上不保留任何使用痕迹)，在切换回来的时候相当于重新创建了一次
• 可以把动态组件用标签包起来

子组件

创建第一个组件

创建第二个组件

• 里面包含了组件一

• 在某一个组件下注册了另一个组件，这样在模板下就可以使用
• 组件在编译的时候，就会把里面注册的组件做一些替换，template在vue里会把模板全部渲染成 render 函数

父子组件通信

父传子

子组件

父组件

子组件props内部属性

基础类型检查(‘null’ 匹配任何类型)

多个可能的类型

required的值为true是说明该项必填

设置默认值

带有默认值的对象

传进来的值必须是这几个里面中的其中一个

自定义类型

子传父

通过自定义事件传
子组件

父组件

父子互相访问

父访问子

• aaa是在组件上赋给ref属性的值，通过这种方法来选中要访问的子组件
• ref和$ref是一对儿。前者在标签中写。ref=方法名，后者在实例中写，this.$rers.方法名
• 也不能说是方法名，后者一般是在某一个方法中用的，
• ref等号后的值和$ref.后的值对应即可选中ref所在的标签

获取第一个子组件

• 由于子组件的个数不确定 返回的是一个数组 ,不是对象

子访问父

• 访问根组件 $root 这个用的也不多
• 实际开发不建议这样使用，因为这样做，子组件就不够独立了，换个地方这个子组件的爹就不一样了，有可能没有name属性
• 组件化开发本身就是提高复用性