Define Props on a Vue Class with vue-property-decorator
vue-property-decorator allows you to define your properties directly on your class with a simple @Prop() decorator. This approach allows your classes to stay clean and flat compared to the traditional approach of defining a props object with each prop defined on it.
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.