一个适用性良好的组件，一种是可配置项很多，另一种就是容易覆写，从而扩展功能
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>
export default { props: { value: {} }, computed: { email: { get() { return this.value }, set(val) { this.$emit('input', val) this.$emit('change', val) } } } }
灵活的 prop
我们常看到一些优秀的组件库，传入的值既可以是一个 String/Number，也可以是一个函数。
比如ElementUI的Table组件，当你想要显示树形数据的时候，必须传入row-key。看它的介绍就知道是有多灵活：
row-key的作用：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function
处理 rowKey 生成 RowIdentity 的函数源码：
//https://github.com/ElemeFE/element/blob/dev/packages/table/src/util.js export const getRowIdentity = (row, rowKey) => { if (!row) throw new Error('row is required when get row identity') // 行数据的key if (typeof rowKey === 'string') { if (rowKey.indexOf('.') < 0) { return row[rowKey] } // 支持多层访问：user.info.id let key = rowKey.split('.') let current = row for (let i = 0; i < key.length; i++) { current = current[key[i]] } return current // 通过函数自定义 // 我处理过父和子id可能相同的情况，只好通过Function自定义 // 不可以通过时间或者随机字符串生成ID } else if (typeof rowKey === 'function') { return rowKey.call(null, row) } }
由于业务场景多变，组件的设计者很难考虑完全，不妨设计灵活的 prop，由开发者自行定义
事件
emit/on
读者肯定知道 emit/on 如何使用，我就简单说一下 vue 的 v-model和sync的语法糖，我们可以利用这些语法糖，帮助我们写出简洁的代码（父组件可以少写监听子组件的事件，比如你不用写@input）
v-model