I added a required prop to my component class using vue-property-decorator
, but when I tried using the component without the prop, I didn't see any console errors that indicate the required prop is missing. Why?
export default class Test extends Vue {
@Prop() private message!: string;
}
The following code yields no errors as expected:
<test message="Hello" />
The following code should result in an error but doesn't:
<test />
All props are optional by default, unless required: true is specified. An absent optional prop other than Boolean will have undefined value. The Boolean absent props will be cast to false .
Vue is written in TypeScript itself and provides first-class TypeScript support. All official Vue packages come with bundled type declarations that should work out-of-the-box.
In this article, we have learned what props do and how props works in Vue. js. In summary, we use props to pass down data from the parent components to the child component(s). The child component also emit events to the parent component(s) in case you need to send data/events from the child to the parent component.
The @Prop
decorator takes a PropOptions
object, which contains a required
property with a default value of false
. To make message
required, specify required: true
in your @Prop
declaration:
@Prop({ required: true }) private message!: string;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With