Define Props Vue

Posted on  by admin

Modified1 year, 5 months ago. In Vue3's defineComponent function, the first generic parameter is Props, so I provide my props type using Typescript interface here. But my props are not identified by Vue, it means the code below won't work:. If I define props options in my components like:. it will occurred type error TS2769: No overload matches this call.And I know if I remove the generic parameter will clean up this error, but the props options is not native Typescript.

Someone know how can I solve this? Props are a Vue runtime construct and can't be inferred from TypeScript type definitions (there are things like default values, validators, etc associated with props). You'll have to define them using the props option as the API expects.

Not the answer you're looking for? Browse other questions tagged typescriptvue.jsvuejs3 or ask your own question.

To provide strong type definitions for your props use PropType to annotate your props. 11 gold badge1414 silver badges2626 bronze badges. 2626 bronze badges.

Instructor: [00:00] If you want this message to be a prop, then you define your props up in this options object.

We'll say message has a default of "hello from default prop." Delete this line here, hit save, and you'll see "hello from default prop." [00:19] If we were to pass in a prop -- I'll say message, "hello from index" -- hit save here, and you'll see "hello from index."

Since we're embracing decorators, we can simplify this as well, where I'll undo all of my changes, and install vue-property-decorator. [00:40] Then I can import from vue-property-decorator the prop decorator.

The prop decorator can just be placed on a class property. We'll say prop. This takes that same prop config object. We'll say default, "hello from prop decorator." [01:01] Delete this on this side, hit save here, and you'll see, "hello from index," because we still have it set in our index file.

Delete that, and you'll see, "hello from prop decorator," which we defined right here. [01:15] Now, just to be a bit more terse, vue-property-decorator includes vue-class-component, and re-exports component.

You can just import that from vue-property-decorator as well, and get the exact same result.

[01:29] vue-property-decorator also provides emit, inject, model view, and watch decorators, but I find the 90 percent scenario is just using component and prop.

A good question to ask at this point would be, so we've imported the SubscriptonForm /> component into App.vue, how do we pass props to it? or emit an event from it to tell the parent that the form has been submitted? Let's find out.

The script setup feature ships with the defineProps and defineEmits APIs that make it possible for us to declare props and emits. They are automatically available inside the script setup context and doesn't need to be imported to use them. Let's demonstrate!

First, in the component, lets define a prop and also emit the submit event like so:

In the snippet above, we did a couple of things using the defineProps and defineEmits API:

  • defineProps – allows us to define props for our component. We used it to define the age prop that will get passed in from the parent (App.vue). Our form will only be visible IF the age prop exists.

  • defineEmits – lets us define the events that our component can emit. In this case, we emit a subscribe event to let the parent component (App.vue) know when the form has been submitted. When that happens, we just log "form submitted" on the parent.

Next, lets update App.vue to capture all these code updates:

Here, we pass the age prop to the SubsbscriptionForm /> component and set up our submit event to call the subscribeUser function whenever the form is submitted from the child component.

And that is how we use props and events in the script setup context.

Worthy mentions

As you can imagine, other features shipped with script setup that we did not get to in this post. However, one that I find really worthy of mentioning is the dynamic components feature. It allows you to dynamically render components in your Vue templates when certain conditions are satisfied.

If you'd like to explore more features and learn other things about the Vue script setup feature, feel free to read the documentation here.