26 - 实现简易版`v-model`指令

[codelo-99]

<script setup lang='ts'>

import { ref, defineExpose, toRef, watchEffect } from "vue"

/**
 * Implement a custom directive
 * Create a two-way binding on a form input element
 *
*/
const VOhModel = {
  mounted(el,binding,vnode,prevVnode){
    const arg = binding.arg
    const instanceModelRef = toRef(binding.instance, arg)
    el.$unwatch = watchEffect(()=>{
      el.value = instanceModelRef.value
    })
    el.$onInput = function(event){
      instanceModelRef.value = event.target.value
    }
    el.addEventListener('input',el.$onInput)
  },
  unmounted(el,binding,vnode,prevVnode){
    el.$unwatch()
    delete el.$unwatch
    el.removeEventListener('input',el.$onInput)
    delete el.$onInput
  }
}

const value = ref("Hello Vue.js")
const value2 = ref('1234')
defineExpose({
  value,
  value2,
})
</script>

<template>
  <p>
    <label>value:</label><input v-oh-model:value type="text" />{{ value }}
  </p>
  <p>
    <label>value:</label><input v-oh-model:value2 type="text" />{{ value2 }}
  </p>
</template>

Vue SFC Playground 在线链接

[bLanK-NULL]

与原装的v-model比起来，1. 在setup语法糖形式下要手动暴露变量； 2. 修改了原生语法 v-model=" " , 可惜的是不改成v-model:xxx 似乎就做不了了，因为拿不到绑定变量的引用只能拿到值，这一点实在是太啥比了