如何在Vue.js 2.0的render函数中实现v-model？

嘿，这个问题我之前踩过坑！确实Vue 2官方的render函数数据对象文档里没直接提到v-model的用法——因为v-model本身就是语法糖，咱们完全可以手动拆解它的逻辑来实现。

先给你理清楚本质：v-model其实就是绑定元素/组件的对应值属性 + 监听触发更新的事件，不同类型的元素对应的属性和事件会略有不同，下面给你分情况举例：

1. 原生文本输入框 #

对于普通文本输入框，v-model等价于绑定value属性 + 监听input事件，用render函数实现的话是这样：

render(h) {
  return h('input', {
    attrs: {
      type: 'text'
    },
    // 绑定DOM属性value到组件的data
    domProps: {
      value: this.inputValue
    },
    // 监听input事件，更新组件data
    on: {
      input: (e) => {
        this.inputValue = e.target.value
      }
    }
  })
}

2. 复选框/单选按钮这类元素 #

这类元素的绑定逻辑不一样，是绑定checked属性 + 监听change事件：

render(h) {
  return h('input', {
    attrs: {
      type: 'checkbox'
    },
    domProps: {
      checked: this.isChecked
    },
    on: {
      change: (e) => {
        this.isChecked = e.target.checked
      }
    }
  })
}

3. 自定义组件的v-model #

如果是给自定义组件实现v-model，逻辑和原生类似，不过是绑定value prop + 监听input事件（如果你的组件自定义了v-model的prop和事件，就对应修改）：

render(h) {
  return h('CustomInput', {
    // 绑定组件的value prop
    props: {
      value: this.componentValue
    },
    // 监听组件触发的input事件，更新数据
    on: {
      input: (newVal) => {
        this.componentValue = newVal
      }
    }
  })
}

总的来说，只要抓住「绑定值属性 + 监听更新事件」这个核心，就能在render函数里完美实现v-model的效果啦。

内容的提问来源于stack exchange，提问作者sof-03