vue控制只读_如何写好一个vue组件,老夫的一年经验全在这了

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

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

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

prop

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

仅一个值传入组件

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

复制代码

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

很多值需要传入组件

比如当一个组件有诸多配置项，且当没有传入配置项取用组件内部默认项的时候，我们原先的父组件写法：

复制代码

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

但是为了方便覆写子组件的内部配置项，不妨使用一个对象将配置收集到一起，但是这种做法不能利用 props 验证对象里面每个的值类型

// 子组件内部读取配置，通过扩展运算符替换掉默认配置const setting ={ ...defaultSetting, ...this.setting}复制代码

computed 属性

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

用于父组件处理的值和子组件处理的值是同一个的情况

export default { props: { value: {} }, computed: { email: { get() { return this.value }, set(val) { this.$emit('input', val) this.$emit('change', val) } } }}复制代码