如何写好一个vue组件,老夫的一年经验全在这了（推荐）

一个适用性良好的组件，一种是可配置项很多，另一种就是容易覆写，从而扩展功能

Vue 组件的 API 来自三部分——prop、事件和插槽：

prop 允许外部环境传递数据给组件 event 允许从组件内触发外部环境的副作用 slot 允许外部环境将额外的内容组合在组件中

prop

组件具有自身状态，当没有相关 porps 传入时，使用自身状态完成渲染和交互逻辑；当该组件被调用时，如果有相关 props 传入，那么将会交出控制权，由父组件控制其行为

仅一个值传入组件

如果该组件设计上支持双向绑定，可使用v-model将该参数传入组件，减少记忆成本（毕竟 vue 官方的语法糖，不用白不用）

<my-component v-model="foo" />

如果该组件可以独立运行，不依赖父组件时，还是给这个值起个名字吧

<component-no-sync :childNeed="foo" />

很多值需要传入组件

我们原先的父组件写法：

<child-component :prop1="var1" :prop2="var2" :prop="var3" ... />

其实可以在父组件上直接使用v-bind={子组件props集合}

传入一个对象

比如当一个组件有诸多配置项，且当没有传入配置项取用组件内部默认项的时候，为了方便覆写子组件的内部配置项，不妨使用一个对象将配置收集到一起，但是这种做法有两个缺点，谨慎使用

不能利用 props 验证对象里面每个的值类型 如果你子组件修改了父组件传入的对象A，父组件的对象A也会发生修改，所以我一般只有子组件不会修改父组件传入的值的情况下，我才会传入对象。父组件把对象传入子组件，是实现双向绑定的hack方式，但不推荐，vue 3.0可能就要对这种方式说拜拜了，为了以后代码好改，还是不要用这种方式实现双向绑定

<child-component v-model="text" :setting="{color:'bule'}" />// 子组件内部读取配置，通过扩展运算符替换掉默认配置const setting ={ ...defaultSetting, ...this.setting}

 还有一种鱼和熊掌兼得的方法，可以给子组件包一层，叫中间组件。父组件将配置项作为一个对象传入中间组件，在中间组件里面对默认配置项进行初始化和覆写，然后再以v-bind={生成好的配置}的方式传入子组件，在子组件里面进行验证。

computed 属性

vue 的 computed 属性默认是只读的，你可以提供一个 setter。它可以优化我写组件的逻辑，适用于父组件处理的值和子组件处理的值是同一个的情况

<template> <el-select v-model="email">  <el-option   v-for="item in adminUserOptions"   :key="item.email"   :label="item.email"   :value="item.email"  /> </el-select></template>