Prop

Prop capitalization (camelCase vs kebab-case)

HTML attribute names are not case-sensitive, so the browser will interpret all uppercase characters to lowercase characters.

This means that when you use the template in the DOM,

camelCase (hump nomenclature) of the prop name requires equivalents of Kebab-Case (named with dashes) name:

 

Vue.component ( 'POST-Blog' , {
   // is the in JavaScript camelCase 
  The props: [ 'posttitle' ], 
  Template: '<H3> posttitle {{}} </ H3>' 
})

 

<! - in HTML is kebab- case of -> 
<Blog-POST POST-title = "! Hello"> </ POST-Blog>

 

Again, if you use a string template, then this restriction does not exist.

 

Prop Type

Here, we only see the prop list in the form of an array of strings:

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

Typically, however, you want every prop has a type specified value . At this point, you can list the prop as objects , these property names and values are the prop their name and type :

 

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

This not only provides the documentation for your components, also prompts the user from the browser's JavaScript console when they encounter the type of error.

You will see other prop type checking and verification in the next section of this page.

 

Transfer static or dynamic Prop

In this way, you already know can give prop passed a static value like this:

<blog-post title="My journey with Vue"></blog-post>

 

You know prop can be  v-bind dynamically assigned, such as:

<! - imparting a dynamic variable value -> 
<Blog the bind-POST-V: title = "post.title"> </ POST-Blog> 


<- imparting a dynamic complex expression values! -> 
<blog- POST 
  V -bind: title = "post.title + 'by' + post.author.name" 
> </ POST-Blog>

In the above two examples, we pass the values are of type string, but in fact any type of value can be passed to a prop .

 

 

Pass a digital

<! - even if `42` is static, we still need to tell` v-bind` Vue -> 
<! - This is a JavaScript expression instead of a string. -> <Blog the bind-POST-V: Likes = "42 is"> </ POST-Blog> 
<- with a variable dynamic evaluation!. -> <Blog the bind-V-POST: = Likes "post.likes"> </ POST-Blog>

 

Pass a Boolean value

<! - include the case of including no value prop, means ` to true `. -> 
<Blog-POST IS-Published> </ Blog-POST> 

<-! Even ` false ` is static, we still need to tell `v-bind` Vue -> 
<-! This is a JavaScript expression instead of a string. -> 
<Blog the bind-POST-V: IS-Published = "to false"> </ POST-Blog> 

<- with a variable dynamic evaluation!. -> 
<Blog the bind-POST-V: IS-Published = "post.isPublished"> </ POST-Blog>

 

Passing an array

<! - even if the array is static, we still need to tell `v-bind` Vue ->
 <! - This is a JavaScript expression instead of a string. -> 
<Blog the bind-POST-V: Comment-IDS = "[234, 266, 273]"> </ POST-Blog>
 
<- with a variable dynamic evaluation!. -> <Blog the bind-POST-V: Comment-IDS = "post.commentIds"> </ POST-Blog>

 

Passing an object

<! - even if the object is static, we still need to tell `v-bind` Vue -> 
<! - This is a JavaScript expression instead of a string. -> <Blog POST- 
  V the bind-: author = "{ 
    name: 'Veronica', 
    Company: 'Dynamics of Veridian' 
  }" 
> </ POST-Blog> 
! <- using a dynamic evaluation variable. -> <Blog the bind-POST-V: author = "post.author"> </ POST-Blog>

 

Passed all the properties of an object

If you want to have all the attributes of an object passed as a prop, you can use without parameters  (substitution  ). For example, for a given object  : v-bindv-bind:prop-namepost

post: {
  id: 1,
  title: 'My Journey with Vue'
}

The following template:

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

Equivalent to:

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

Unidirectional data flow

All prop prop father and son are formed between such a unidirectional downlink binding: prop parent will flow down to update subassembly,

But not vice versa. This will prevent accidental changes to the parent component sub-assemblies from the state, resulting in the flow of data your application difficult to understand

 

Additional, each time the parent is updated components, sub-assemblies are all the prop will refresh to the latest value.

This means that you should not change prop within a subassembly. If you do this, Vue will issue a warning in the browser console.

There are two common situations trying to change a prop:

 

1. The prop is used to pass an initial value; this subassembly next want to use it as a local data prop.

In this case, a better definition of properties and the local data as its initial value prop:

 

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

 

2. The prop passed with a primitive value and need to be converted. In this case, it is preferable to use this prop values to define a calculated properties:

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

Note that in JavaScript objects and arrays are passed by reference,

So for an array or prop for the object type,

Or change the object array sub-assembly per se will affect the status of the parent component.

 

Prop verification

We can prop specify authentication requirements of the components, such as those types you know.

If there is a demand not being met, the Vue will warn you in the browser console.

This is especially helpful in the development of a someone else will be used in the assembly.

 

To customize prop authentication methods, you can  props provide an object with validation requirements in value instead of a string array. E.g:

Vue.component ( 'My-Component' , { 
  The props: { 
    // foundation type checking ( `null` and` undefined` verifies any type) 
    propA: Number The,
     // plurality of possible types 
    propB: [String, number the],
     // required string 
    propC: { 
      type: string, 
      required: to true 
    }, 
    // number with a default value 
    propD: { 
      type: number the, 
      default : 100 
    }, 
    // object with default values 
    PROPE: { 
      type: Object, 
      // object or array default function must be obtained from a factory 
      default : function () {
         return {Message: 'Hello'} 
      } 
    } 
    // custom validation function 
    propF: { 
      Validator: function (value) {
         // This value must match the string following a 
        return [ 'Success', 'warning', 'Danger'] the indexOf (value. !) == -1 
      } 
    } 
  } 
})

When prop validation fails, the (development environment to build versions) Vue will generate a warning console.

 

Note that the prop will be verified before the next component instance is created, the instance attribute (e.g. ,  etc.)   or  a function unavailable. datacomputeddefaultvalidator 

Type checking

type The following may be native to a constructor:

String
Number
Boolean
Array
Object
Date
Function
Symbol

Additional, type it may also be a self-defined constructor, and by  instanceof be checked to confirm.

For example, given the following ready constructor:

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

 

you can use:

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

To verify  author whether the prop value is by  new Person creating.

 

Characteristics of non-Prop

It refers to a non-prop characteristic properties to pass a component, but the component is not defined by the respective prop.

Because an explicitly defined prop apply to incoming information to a sub-assemblies, however, of the component library can not always be foreseen scene components will be used to look like. That's why the component can accept any of the features, and these features will be added to the root element of this component.

For example, imagine you use a third-party plug-ins through a Bootstrap  <bootstrap-date-input> components, this plug-in it needs to  <input> be used on a  data-date-picker feature. We can add this feature to your component instance:

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

 

Then the properties will be automatically added to  the root element. data-date-picker="activated"  <bootstrap-date-input>

 

Replace / merge the existing properties

Imagine  <bootstrap-date-input> template is this:

<input type="date" class="form-control">

 

To give us a date picker plugin custom theme, we may need something like this to add a particular class name:

<bootstrap-date-input
  data-date-picker="activated"
  class="date-picker-theme-dark"
></bootstrap-date-input>

 

In this case, we define two different  class values:

• form-controlIt is set in a good template assembly
• date-picker-theme-darkThis is from the parent component of the incoming

For most characteristics, the values ​​provided to the assembly from the outside will replace the value of the component is provided inside good.

So if passed  will replace   and destroy it! Fortunately, type="text"type="date"

class And style  characteristics of a number of intelligent slightly, i.e., the value of both sides are combined,

To obtain the final value: form-control date-picker-theme-dark.

 

Disable feature inheritance

If you do not want the root element components inherit properties, you can set options for assembly . E.g: inheritAttrs: false

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

This applies in particular with the instance  attribute using the attribute contains a component passed to the attribute name and the attribute value, for example: $attrs

{
  required: true,
  placeholder: 'Enter your username'
}

 

With  inheritAttrs: false and  $attrs, you can manually determine which elements of these features will be given. In writing the base component time is often used:

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

Note that  option does not affect   and  binding. inheritAttrs: falsestyleclass 

This mode allows you to use more like the original HTML element in the use of basic components, and not worry about which element is the real root element:

<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>