vue2 封装组件 使用v-model

简单记录下组件封装，使用v-model进行响应

对组件进行封装，能共享数据操作，使用v-model传入值，以及使用this.$emit('input', value)改变值。

在props中，接收value值

在computed中使用obj接收value值，改变obj会直接提交到外部v-model上

<!--
 * 使用：
    <Form v-model="obj" />
    初始化需要确定obj的属性，否则在后续操作需要使用Vue.set|this.$set，要使属性是响应式
    可以这样操作：
    1、obj: { name: '' }    this.obj.name = 'a'
    2、obj: {}              this.$set(this.obj, 'name', 'a')
    不能这样操作：
    1、obj: {}              this.obj.name = 'a'  // 这样会使属性不是响应式
-->
<template>
  <el-form label-width="80px" :model="obj">
    <el-form-item label="名称">
      <el-input v-model="obj.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-input v-model="obj.region"></el-input>
    </el-form-item>
    <el-form-item label="活动形式">
      <el-input v-model="obj.type"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'Form',
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    obj: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      }
    }
  }
}
</script>