如何利用v-model写好vue组件

一、正确认识v-model

v-model其实是个语法糖，可以把它拆解成两部分，首先是通过:value="someValue"将数据通过props传入子组件，然后通过监听子组件的input事件更新父组件的数据@input="val => someValue = val"

<child-component v-model="someValue"/>

<!--等效于-->
<child-component :value="someValue" @input="val => someValue = val"/>

<!--通常用一个method来处理input事件-->
<child-component :value="someValue" @input="handleInput"/>

handleInput (val) {
    this.someValue = val
}

二、组件的设计目的

v-model一般是交由子组件处理某些数据，并且跟父组件进行数据同步，不管是父组件数据的更新还是子组件数据的操作，经由v-model绑定的数据都应该是响应的

三、设计思路

child-component 必须 要有个存储 当前数据 的地方，我们一般用做currentValue，它的初始值是props传入的value

data () {
    return {
        currentValue: this.value
    }
},
props: {
    value: String
}

几个要点注意：

• value是由父组件传入的，并且是响应式的，父组件的值发生改变后子组件的value也会跟着变化

• 如果value是值类型（String，Number等）而非引用类型（Array，Object等），currentValue只在子组件创建的时候得到value的值，之后value的改变跟currentValue没有半毛钱关系

清楚了以上的点，当在子组件处理数据的时候，就必须手动更改currentValue的值

为了要实时获取父组件value的变化，我们在子组件watch value

watch: {
    value (value) {
        if (value === this.currentValue) return
        // 更新currentValue
        this.currentValue = value
        
        // do something
    }
}

子组件的数据更新后要提交到父组件

someChangeHandle (value) {
    // 之前提到的手动更新currentValue
    this.currentValue = value
    // 通过input事件告知父组件更新value
    this.$emit('input', value)
}

有的时候我们要对value进行某些处理，不方便直接赋值，这时可以写个setCurrentValue方法

data () {
    return {
        val1: undefined,
        val2: undefined,
        currentValue: null
    }
},
props: {
    value: Array
},
methods: {
    setCurrentValue (value) {
        // value我们预期的是数组，如果不是，默认为空数组
        value = value instanceof Array && value || []
        // 如果父组件的value跟子组件的currentValue一样，则不做处理
        if (JSON.stringify(value) === this.currentValue) return
        this.currentValue = JSON.stringify(value)
        this.val1 = [value][0]
        this.val2 = [value][1]
    }
},
watch: {
    value: 'setCurrentValue'
},
created () {
    this.setCurrentValue(this.value)
}

清楚了以上的设计思路，接下来的难点就可以顺利展开了

currentValue都是大同小异，而如何 emit 则要根据不同业务不同处理

四、实例

这里引用个checkbox的例子，checkbox的选项都是由接口获取的

前端UI组件用的 iview ，Ajax方法略过

data

属性	说明
currentValue	存储当前的值
data	接口获取到的数组

props

属性	类型	说明
url	String	接口的地址，这个不用多说，既然是异步，肯定必传
params	Object	接口的参数
trackBy	String	追踪数组元素唯一性的key
filterMethod	Function	数据过滤的方法，对checkbox的每项数据进行过滤
format	Function	对emit的array每个元素进行格式化
value	Array	v-model绑定的值，这里是个数组

computed

属性	说明
ids	根据value计算出追踪到的id的数组
paramsString	接口参数转字符串，后续的watch用来触发拉取接口。为什么要转成字符串？因为引用类型的watch或计算属性会触发一些意料之外的响应式计算
filteredData	过滤规则后的checkbox选项，模板里用来渲染的
emitData	emit到父组件的计算后的数据，关键

methods

setCheck

每次拉完数据并且成功后会将根据ids打上_checked标记，注意通过$set把_checked属性标记为响应式的

全部代码如下，enjoy

<template>
  <div style="position: relative;">
    <Spin fix v-show="loading"></Spin>
    <Button
      v-if="success === false"
      size="small"
      icon="refresh"
      @click="fetchData({cacheClear: 1})"
      :disabled="loading">重载</Button>
    <template v-if="filteredData.length">
      <div style="margin-bottom: 5px;">
        <Checkbox :indeterminate="indeterminate" v-model="checkAll">全选</Checkbox>
      </div>
      <Checkbox
        v-for="row of filteredData"
        v-model="row._checked"
        :label="row[trackBy]"
        :key="row[trackBy]">
        <slot :row="row">{{row[trackBy]}}</slot>
      </Checkbox>
    </template>
  </div>
</template>

export default {
  name: 'RemoteCheckbox',
  data () {
    return {
      loading: false,
      success: undefined,
      data: [],
      currentValue: null
    }
  },
  props: {
    url: {
      type: String,
      required: true
    },
    params: Object,
    trackBy: {
      type: String,
      default: 'id'
    },
    // 数据过滤方法
    filterMethod: Function,
    // 格式化方法
    format: {
      type: Function,
      default (row) {
        return row[this.trackBy]
      }
    },
    value: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    indeterminate () {
      return this.emitData.length > 0 && this.emitData.length !== this.filteredData.length
    },
    checkAll: {
      get () {
        return this.filteredData.length === this.emitData.length
      },
      set (bool) {
        this.setCheck({force: bool})
      }
    },
    ids () {
      const ids = []
      for (let row of this.value) {
        if (typeof row === 'object') {
          if (typeof row[this.trackBy] === 'string') {
            ids.push(row[this.trackBy])
          } else {
            return []
          }
        } else if (typeof row === 'string') {
          return this.value
        }
      }
      return ids
    },
    paramsString () {
      return JSON.stringify(this.params)
    },
    filteredData () {
      const data = []
      for (let row of this.data) {
        if (typeof this.filterMethod === 'function' && !this.filterMethod(row)) continue
        data.push(row)
      }
      return data
    },
    emitData () {
      const data = []
      for (let row of this.filteredData) {
        if (row._checked) data.push(this.format(row))
      }
      return data
    }
  },
  methods: {
    fetchData (params = {}) {
      this.loading = true
      this.$Ajax.get(this.url, {...this.params, ...params})
      .then(rs => {
        this.success = [1, -1].includes(rs.code)
        this.data = (rs.data instanceof Array && rs.data) || []
        if (this.success) {
          this.setCheck()
        }
      })
      .finally(() => {
        this.loading = false
      })
    },
    // 给data添加checked属性
    setCheck ({force} = {}) {
      if (!this.ids.length && !force) return
      for (let row of this.data) {
        this.$set(row, '_checked', typeof force !== 'undefined' ? force : this.ids.includes(row[this.trackBy]))
      }
    },
    setCurrentValue (value) {
      if (JSON.stringify(value) === this.currentValue) return
      this.currentValue = JSON.stringify(value)
      this.setCheck()
    }
  },
  watch: {
    value: 'setCurrentValue',
    // 注意这里的url和paramsString的参数是有值的并且值是String，不能直接指向fetchData
    url () {
      this.fetchData()
    },
    paramsString () {
      this.fetchData()
    },
    emitData (value) {
      if (this.success) {
        this.$emit('input', value)
        this.currentValue = JSON.stringify(value)
        this.$parent.$emit('on-form-change')
      }
    }
  },
  mounted () {
    this.fetchData()
    this.setCurrentValue(this.value)
  }
}