Vue 3
Props & Emits
Declare inputs and events, and implement v-model on a component.
By EZ4Code Team
propsemitsv-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>Explanation
defineProps declares a component's inputs with type validation, while defineEmits declares the events it can fire. Together with update:modelValue they implement v-model on a custom component. Both are compile-time macros, so they need no import.
More Vue 3 Snippets
Single-File Component
Define a Vue 3 component with script setup, template, and scoped styles.
Composition API
Organize reactive state, computed, and lifecycle logic by feature.
Refs & Reactive
Choose between ref and reactive for reactive state.
Computed & Watch
Derive values with computed and react to changes with watch.
Lifecycle Hooks
Register lifecycle callbacks as composable functions.
Slots & Scoped Slots
Distribute content with default, named, and scoped slots.