09-封装通用操作以期解耦组件.md

封装通用操作以期解耦组件

问：为什么要封装？
答：为了让页面更加的简洁，更易维护，更加简单的使用

问：要封装哪些组件？
答：input,radio,checkbox....等基础组件因为 ui 组件的不同也需要去做二次封装，使得页面能够更加方便的使用

问：如何去封装？
答：结合业务去封装适合自己项目的组件即可，基础组件则尽可能的简单

组件封装实践

下们以 input 组件 v-form-input 为例介绍如何去封装一个组件

v-form-input 组件封装

1. 使用 props 接收 value 参数，即 v-model 或者:value 绑定的值
2. 使用 $emit('input') 向上传递 v-model 绑定的值
3. 监听 value 值以及时相应外层绑定

<template>
  <input type="value" v-model="currentValue" @change="change" />
</template>
<script>
export default {
  name: 'v-form-input',
  props: {
    value: String
  },
  data() {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value(val) {
      if (this.currentValue !== val) {
        this.currentValue = val
      }
    },
    currentValue(val) {
      if (val !== this.value) this.$emit('input', val)
    }
  },
  methods: {
    change(e) {
      this.$emit('change', e)
    }
  }
}
</script>