本文目的：当你想要快速编写一个包含v-model的组件时，不妨来这里查查资料。在复杂项目中，并不必要为某个组件单独编写一个SFC(Single File Component)，可以聚合的将一系列的高复用的小组件函数化写成Component Hooks，也可以在setup中快速编写需要的临时组件，这将是一个很棒的体验。

v-model 原理

• 传递一个modelValue的prop属性
• emit一个update:modelValue事件

// v-model="fooA"
const componentA = (props, ctx) => {
  const {emit} = ctx
  return h('input', {
    value: props.modelValue,
    onInput: (e) => {
      emit('update:modelValue', e.target.value)
    }
  })
}

声明式函数组件

此处是经典的仿类声明。需要注意的props属性不可缺少

// v-model="fooB"
const componentB = {
  props: ['modelValue'],
  setup(props, context){
    const {emit} = context;
    return () => h('input', {
      value: props.modelValue,
      onInput: (e) => {
        emit('update:modelValue', e.target.value)
      }})
  }
}

v-model:foo 写法

与默认的v-model写法区别在于modelValue变成了自定义变量foo（你可以任意命名哦）

// v-model:foo="fooC"
const componentC = (props, ctx) => {
  const {emit} = ctx
  return h('input', {
    value: props.foo,
    onInput: (e) => {
      emit('update:foo', e.target.value)
    }
  })
}

函数组件调用带有v-model的组件

当我们的函数组件调用包含v-model的组件 该如何配置呢？ （v-model是语法糖不能直接在h的参数中使用） 那就是拆解子组件的v-model变成可用的h函数参数属性

• modelValue
• onUpdate:modelValue 注意这里on开头

import {Checkbox} from 'vant'
import 'vant/lib/checkbox/style/index'
 
const foo = ref(false)
const NewCheckbox = (props, ctx) => {
    return h(Checkbox, {
    iconSize: '16px',
    modelValue: props.modelValue,
    'onUpdate:modelValue': e => ctx.emit('update:modelValue', e)}
    // 使用如下的写法 将不会更新函数组件 因为函数组件的刷新是单向的，依赖props
    // modelValue: foo,
    // 'onUpdate:modelValue': e => foo.value = e}
   )
}
 
// <NewCheckbox v-model="foo" />