vue组件化开发
认识组件化:组件化就是将一个复杂的页面拆分出来逐个实现可复用的组件,再将其放在整体当中。
-
如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。
-
组件化我们讲一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。
注册组件的基本步骤:
- 创建组件构造器 Vue.extend()
- 注册组件 Vue.componene()
- 使用组件 或
全局组件和局部组件
-
当我们通过调用Vue.component()注册组件时,组件的注册是全局的。这意味着该组件可以在任意Vue示例下使用。
-
如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件
为什么data在组件中必须时一个函数和?
- 首先,如果不是一个函数。vue 直接就会报错
- 其次,原因是在于vue让吗,每个组件对象都返回一个新的对象,因为如果是同一个对象的,组件在多次使用后会相互影响
父子组件的通信:
-
通过props向子组件传递数据
props数据验证
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYiNjqvf-1635242486348)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20211026173417964.png)]
-
通过事件向父组件发送消息
p在子组件中,通过$emit()来触发事件。
p在父组件中,通过v-on来监听子组件事件。
父子组件的访问方式:
- p父组件访问子组件:使用 c h i l d r e n 或 children或 children或refs
- p子组件访问父组件:使用$parent
slot插槽:
组件是可复用的但是当组件在两个不一样的地方就可以使用slot来实现。
-
最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
-
一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
-
是搜索框,还是文字,还是菜单。由调用者自己来决定。
slot的基本使用
- 在子组件中,使用特殊的元素就可以为子组件开启一个插槽。
- 该插槽插入什么内容取决于父组件如何使用。
组件:
<div>
<slot>我是默认值</slot>
</div>
实例:
<div>
<my-cpn></my-cpn>//这里没有传值会显示默认值
<my-cpn>我是自定义的值</my-cpn>
</div>
-
在子组件中,使用特殊的元素就可以为子组件开启一个插槽。
-
该插槽插入什么内容取决于父组件如何使用。
-
中的内容表示,如果没有在该组件中插入任何其他内容,就默认显示该内容
具名插槽n当子组件的功能复杂时,子组件的插槽可能并非是一个。
-
比如我们封装一个导航栏的子组件,可能就需要三个插槽,分别代表左边、中间、右边。
-
那么,外面在给插槽插入内容时,如何区分插入的是哪一个呢?
-
这个时候,我们就需要给插槽起一个名字
-
如何使用具名插槽呢?
-
非常简单,只要给slot元素一个name属性即可
-
作用域插槽:
作用域插槽的使用: