Props & Emits

Declare inputs and events, and implement v-model on a component.

#props#emits#v-model

Code

<script setup>
const props = defineProps({
  modelValue: { type: String, required: true }
});
const emit = defineEmits(["update:modelValue", "submit"]);

function update(value) {
  emit("update:modelValue", value);
}
</script>

<template>
  <input
    :value="props.modelValue"
    @input="update($event.target.value)"
  />
  <button @click="emit('submit')">Save</button>
</template>

All snippets