组件化
思想
-
人面对复杂问题的处理方式:
1: 任何一个人处理信息的逻辑能力都是有限的
2: 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。
3:但是,我们人有一种天生的能力 ,就是将问题进行拆解。
4:如果将一个复杂的问题 ,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃 -
组件化也是类似的思想
1:如果我们将一个页面中所有的处理逻辑全部放在一
起,处理起来就会变得非常复杂,而且不利于后续
的管理以及扩展。
2:但如果,我们讲一个页面拆分成一个个小的功能块,
每个功能块完成属于自己这部分独立的功能,那么
之后整个页面的管理和维护就变得非常容易了。 -
组件化提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用,任何的应用都会被抽象成一颗组件树
使用步骤
创建组件构造器
注册组件
使用组件
组件不可以直接访问Vue实例的数据,不建议使用
组件里也有data属性
- 但是这个data类型不能是对象
模板这样写
全局组件
- 全局组件可以在多个Vue实例下使用
局部组件
动态组件
- is属性是哪个显示那个组件
父组件
- 一个组件要想使用,要么在全局注册过,要么在Vue实例下注册过
- 动态组件切换的时候会把以前的组件删除掉(页面上不保留任何使用痕迹),在切换回来的时候相当于重新创建了一次
- 可以把动态组件用标签包起来
子组件
创建第一个组件
创建第二个组件
- 里面包含了组件一
- 在某一个组件下注册了另一个组件,这样在模板下就可以使用
- 组件在编译的时候,就会把里面注册的组件做一些替换,template在vue里会把模板全部渲染成 render 函数
父子组件通信
父传子
子组件
父组件
子组件props内部属性
基础类型检查(‘null’ 匹配任何类型)
多个可能的类型
required的值为true是说明该项必填
设置默认值
带有默认值的对象
传进来的值必须是这几个里面中的其中一个
自定义类型
子传父
通过自定义事件传
子组件
父组件
父子互相访问
父访问子
- aaa是在组件上赋给ref属性的值,通过这种方法来选中要访问的子组件
- ref和 r e f 是 一 对 儿 。 前 者 在 标 签 中 写 。 r e f = 方 法 名 , 后 者 在 实 例 中 写 , t h i s . ref是一对儿。前者在标签中写。ref=方法名,后者在实例中写,this. ref是一对儿。前者在标签中写。ref=方法名,后者在实例中写,this.rers.方法名
- 也不能说是方法名,后者一般是在某一个方法中用的,
- ref等号后的值和$ref.后的值对应即可选中ref所在的标签
获取第一个子组件
- 由于子组件的个数不确定 返回的是一个数组 ,不是对象
子访问父
- 访问根组件 $root 这个用的也不多
- 实际开发不建议这样使用,因为这样做,子组件就不够独立了,换个地方这个子组件的爹就不一样了,有可能没有name属性
- 组件化开发本身就是提高复用性