v-model

v-model is used to express the bidirectional status between father and son. The macro component uses defineModel() internally.

import { defineHtml, defineModel } from "@elfui/core";

const value = defineModel<string>({ default: "" });

const onInput = (event: Event): void => {
  value.set((event.target as HTMLInputElement).value);
};

export const TextField = defineHtml(` <input .value=${value} @input=${onInput} /> `);

Parent component uses:

const name = useRef("");

export const Page = defineHtml(`
  <text-field v-model=${name}></text-field>
  <p>${name}</p>
`);

Name model

const open = defineModel<boolean>("open", { default: false });

Parent component:

<elf-dialog v-model:open="visible"></elf-dialog>

relationship with events

The default model uses the modelValue prop and update:modelValue event. Named models will use corresponding props and update events.

If you only notify an action once, use an event; if the parent component needs to hold the current value, use v-model.