vue项目调用通用组件_vue封装公共组件（通用组件）需要考虑到什么

开发通用组件是很基础且重要的工作，通用组件必须具备高性能、低耦合的特性一、数据从父组件传入为了解耦，子组件本身就不能生成数据。即使生成了，也只能在组件内部运作，不能传递出去。父对子传参，就需要用到 ...

开发通用组件是很基础且重要的工作，通用组件必须具备高性能、低耦合的特性

一、数据从父组件传入

为了解耦，子组件本身就不能生成数据。即使生成了，也只能在组件内部运作，不能传递出去。

父对子传参，就需要用到 props，但是通用组件的的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则

二、在父组件处理事件

在通用组件中，通常会需要有各种事件，

比如复选框的 change 事件，或者组件中某个按钮的 click 事件

这些事件的处理方法应当尽量放到父组件中，通用组件本身只作为一个中转

三、记得留一个 slot

一个通用组件，往往不能够完美的适应所有应用场景

所以在封装组件的时候，只需要完成组件 80% 的功能，剩下的 20% 让父组件通过 solt 解决

四、不要依赖 Vuex

父子组件之间是通过 props 和 自定义事件 来传参，非父子组件通常会采用 Vuex 传参

但是 Vuex 的设计初衷是用来管理组件状态，虽然可以用来传参，但并不推荐

因为 Vuex 类似于一个全局变量，会一直占用内存

在写入数据庞大的 state 的时候，就会产生内存泄露

五、合理运用 scoped 编写 CSS

在编写组件的时候，可以在

但是一味的使用 scoped，肯定会产生大量的重复代码

所以在开发的时候，应该避免在组件中写样式

当全局样式写好之后，再针对每个组件，通过 scoped 属性添加组件样式
————————————————
版权声明：本文为CSDN博主「weixin_39593519」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39593519/article/details/113687377