前端封装组件

Posted 2022-12-04 单身girl

● 首先，使用Vue.extend()创建一个组件

● 然后，使用Vue.component()方法注册组件

● 接着，如果子组件需要数据，可以在props中接受定义

● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法
需要用到的有：
1.通过props传入的参数不建议对其进行操作，会同时修改父组件中的数据。
props 的使用
type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告
default：any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值
required：Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
附带官方文档链接: link.

2.处理事件的方法尽量写在父组件中，以保证通用组件中的数据不被污染。
3.尽量使用props和自定义事件，因为当页面刷新时vuex会重新初始化，丢失已编辑的数据父对子传参，就需要用到props，但是通用组件的的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则
4.留一个slot 在不能完全适用任何业务场景的情况可以有效解决
5.当全局样式写好之后，再针对每个组件，通过 scoped 属性添加组件样式
6.组件分类 通用组件和定制化组件单独封装
7.css的复用
8.使用具名插槽和普通插槽区别
插槽用于实现组件的内容分发,通过slot标签可以接收到写在组件标签内的内容 ,vue提供组件插槽能力,允许开发者在封装组件时把不确定的部分定义为插槽

匿名插槽： 不写name属性时的使用方法就叫匿名插槽，其时所谓的匿名插槽是有名字的 他的名字是default

具名插槽： 可以通过v-slot:插槽的名字 , 给指定的插槽定义内容 ,v-slot:名字可以简写为 #名字

作用域插槽： 插槽也可以通过自定义属性预备插槽需要使用的数据 而这种插槽就叫做作用域插槽

部分文章粉丝可见欢迎关注