0Pricing
Vue Academy · Lesson

defineProps and defineEmits

Typed props with defineProps (), defineEmits (), withDefaults() for defaults.

Communicating Between Components

Components receive data through props and send messages up through events. In <script setup> you declare these with the defineProps and defineEmits macros.

defineProps the Runtime Way

You can declare props with a runtime object, just like the Options API. This works in both JS and TS.

<script setup>
const props = defineProps({
  title: String,
  count: Number
})
console.log(props.title)
</script>

All lessons in this course

  1. Introduction to script setup
  2. defineProps and defineEmits
  3. defineExpose and useAttrs
  4. Importing and Using Composables in script setup
← Back to Vue Academy