Add other directive to the component in custom directive

[SnowingFox]

For example about a custom directivev-form

it can help us to use v-model, then we can use function expression and bind v-model to another context

Directive

export function formDirective(el, binding, vnode) {
    const model = binding.value   // Ref
    vnode.props = {
      modelValue: model,
      'onUpdate:modelValue': (value) => model.value.value = value
    }
}

// main.js

app.directive('form', formDirective)

Component

<script setup>
const { register } = useForm() 
</script>
<template>
    <input v-form="register('username', { required: 'Username is required!' })"/>
</template>

useForm

export function useForm() {
    const onChange = (fieldName) => {
        // do somework when change
    }
    const register = (fieldName, options) => {
        const model = ref()
        watch(model, () => {
            onChange(fieldName)
        })
        return model
    }
    
    return {  register }
}

As same as <input v-model="model" />, it can be transformed into

<input :value="model" @input="(e) => model.value = e.target.value"/>

we can do it in custom directive, not limited to compiler, give developer more free space to coding.