Check out a free preview of the full Introduction to Vue 3 course

The "Props & Context" Lesson is part of the full, Introduction to Vue 3 course featured in this preview video. Here's what you'd learn in this lesson:

Sarah explains that props in the context of the composition API are reactive and are passed into setup, and adds that context is passed as the second argument in setup, which allows the engineer to access events like emit.


Transcript from the "Props & Context" Lesson

>> Props. It's kind of like how you're used to using them. They are reactive and now they're passed into setup. So, if we're working with props we could declare it the same way we could either do it in an array, in a string in array. Or we could say type number required true, give it a default, things like that.

And then in that initial setup, we would pass in props. And that's how we would work with it. And so from here, what we would say is props dot count. So in order to access that piece we could say, props count, so we're declaring the props here. We pass it into setup, and then we say props dot count.

Context, it's passed as the second argument in setup, so it's always gonna be props and then context. And context is like the dollar sign that you are used to seeing before. So you could say context dot omit and the event, so remember when we use dollar sign omit, this is how you would use context.

So things like omit attrs, things like that would be passed in here. Or you could destructure it and instead of passing in context, you could pass an emit in an object, and then just say emit event name. Instead of saying context dot emit we would just say emit.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now