emit a function call to the parent element in a vuejs formkit custom input in typescript

To emit a function call to the parent element in a Vue.js FormKit custom input with TypeScript, you can use the this.$emit() method within the method of the custom input component. The this.$emit() method takes two arguments: the event name and the argument(s) to be passed to the parent.

Here's an example implementation:

index.ts
<template>
  <div>
    <input :value="value" @input="updateValue($event.target.value)">
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { FieldPropsDefine } from '../types'

export default defineComponent({
  name: 'StringField',
  props: FieldPropsDefine,
  setup(props) {
    const updateValue = (value: string) => {
      props.onChange(value)
      // Emit function call to parent
      this.$emit('parentFunc', value)
    }

    return {
      updateValue,
    }
  },
})
</script>
524 chars
27 lines

In this example, the updateValue() method is called whenever the input changes. Within updateValue(), we first call the onChange() function provided by FormKit to update the input value. Then, we use this.$emit() to emit the parentFunc event with the value argument passed as its parameter. We can listen for this event in the parent component and perform the desired function call.