1. The Prop type

Prop is currently listed as an array of strings:

Props: [‘title’, ‘likes’, ‘isPublished’, ‘commentIds’, ‘author’]

But it is common to want each prop to have a specified value type. In this case, we can list prop as objects with property names and values that are the names and types of the prop:

props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Objec, callback: Function, contactsPromise: Promise // or any other constructor}Copy the code

This not only provides documentation for the components, but also prompts the user from the browser’s JavaScript console if they encounter the wrong type, followed by type-checking and other prop validation.

2. Pass static or dynamic Prop

We can pass a static value to prop like this:

Dynamically assign a value to a variable:<blog-post :title="post.title">
Dynamically assign a value to a complex expression:<blog-post :title="post.title + 'by' + post.author.name">

The values we passed in the above example are all strings, but actually any type of value can be passed to a prop.

2.1 Passing in a number

Even if ’42’ is static, we still need ‘v-bind’ to tell Vue that this is a JavaScript expression and not a string:<blog-post :likes="42">
Dynamic assignment with a variable:<blog-post :likes="post.likes">

2.2 Passing in a Boolean value

If prop has no value, it means’ true ‘, if is-published type is not set to Boolean in props, then the value here is an empty string instead of ‘true’ :<blog-post is-published>
Even if ‘false’ is static, we still need ‘v-bind’ to tell Vue that this is a JavaScript expression and not a string:<blog-post :is-published="false">
Dynamic assignment with a variable:<blog-post :is-published="post.isPublished">

2.3 Passing an array

Even if the array is static, we still need to ‘v-bind’ to tell Vue that this is a JavaScript expression and not a string:<blog-post :comment-ids="[234, 266, 273]">
Dynamic assignment with a variable:<blog-post :comment-ids="post.commentIds">

2.4 Passing in an object

Even if the object is static, we still need to ‘v-bind’ to tell Vue that this is a JavaScript expression and not a string:<blog-post :author="{name: 'Veronica', company: 'Veridian Dynamics'}">
Dynamic assignment with a variable:<blog-post :author="post.author">

2.5 Pass in all properties of an object

If you want to pass all of an object’s properties as prop, you can use v-bind with no arguments instead of V-bind :prop-name. For example, given an object post:

post: {id: 1, title: ‘My journey with Vue’}

Then the template is:

<blog-post v-bind="post">

Is equivalent to:

<blog-post v-bind:id="post.id" v-bind:title="post.title">

3. Unidirectional data flow

All prop creates a one-way downlink binding between their parent prop: updates from the parent prop flow down to the child, but not the other way around. This prevents the child component from accidentally changing the state of the parent component, making the application’s data flow difficult to understand. In addition, every time the parent component changes, all prop in the child component will be refreshed to the latest value. This means that prop should not be changed inside a child component, and Vue will warn the browser console if it does. There are two common situations when trying to change a PROP:

1. The prop is used to pass an initial value: the child component then wants to use it as a local prop data. In this case, it is best to define a local data Property with this prop as its initial value:

props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}
Copy the code

2. The prop is passed in as a raw value and needs to be converted. In this case, it is best to use the value of this prop to define a calculated property:

props: ['size'],
computed: {
  normalizedSize () {
    return this.size.trim().toLowerCase()
  }
}
Copy the code

Note that objects and arrays are passed in by reference in JavaScript, so for a prop of an array or object type, changing the object or array itself in a child component will affect the state of the parent component.

4. Prop

We can specify validation requirements for components’ prop, such as the types known. If a requirement is not met, Vue warns in the browser console. This is especially helpful when developing a component that will be used by others. To customize the validation of prop, instead of an array of strings, provide an object with validation requirements for the values in props.

Basic type checking, multiple possible types, mandatory strings, numbers with default values, objects with default values, custom validation functions, functions with default values

Vue will generate a console warning when prop validation fails. Note that those prop are validated before a component instance is created, so instance properties (such as data, computed, and so on) are not available in default or Validator functions.

4.1 Type Check

Type can be one of the following native constructors:

String, Number, Boolean, Array, Object, Date, Funtion, Symbol

In addition, type can be a custom constructor and checked with instanceof. For example, given the following ready-made constructor:

function Person(firstName, lastName) {this.firstName=firstName, this.lastName=lastName}

You can use:

app.component(‘blog-post’, { props: { author: Person } })

Verify that the value of author Prop was created by new Person.

4.2 Case Naming of Prop (camelCase vs Kebab-case)

Attribute names in HTML are case insensitive, so the browser interprets all uppercase characters as lowercase characters. This means that when using templates in the DOM, camelCase’s prop name needs to be named using its equivalent kebab-case (dash delimited naming). Also, if you use a string template, this limitation does not exist.

Props