Close read Vue official documentation series 🎉

Prop case

Prop can be named in either of the following ways:

  • CamelCase: small hump in nomenclature.
  • Kebab-case: separator naming method

Although the Vue template compiler can support both naming methods, browsers are insensitive to case and the W3C recommends kebab-case as the naming convention for custom elements, so as a best practice, We use kebaba-case for naming elements and attributes, and camelCase for component logic.

<blog-post :post-id="post.id" :post-content="post-content" name="article" />
Copy the code
export default {
    name:'MyComponent'.props: ['postId'.'postContent']}Copy the code

Prop type

Use the props property to declare the prop used by the component

Only prop declared with the props option can be accessed by a component instance, and the value is usually an array of strings.

Prop type

If you want to specify the type of value for each prop, you can list the prop as an object. Advantages of specifying a type for a prop value:

  • Specification component documentation.
  • Type detection and hints.

The default type

Use the browser’s built-in native constructor as a type. For example: Number, String, Date, Boolean, Object, Array, Promise, Function, Symbol.

Custom type

The type of prop value can also be a custom constructor, which Vue automatically compares with the instanceof operator.

props:{
    jack:Human
}
Copy the code

Pass static or dynamic Prop

Passing static data

Pass static data, plain strings, assigned directly using HTML attributes.

<my-component name="article" />
Copy the code

Passing dynamic data

Passing dynamic data, variables, or responsive objects requires dynamic assignment using the V-bind directive.

<my-component :post-id="post.id" />
Copy the code

Static versus dynamic assignment

Transfer string type

<my-component name="article" />
<my-component2 :name="'article'" />
Copy the code

Incoming object type

<! Parse --> The component receives a string and needs its own JSON.
<my-component post="{name:'article',content:'content'}" /> 
<my-component2 :post="data.post" />
Copy the code

Pass in all properties of an object

Pass all key-value pairs of an object as prop to child components. The implementation is very simple, assigning a value to the V-bind instruction.

export default {
    data(){
        return {
            post: {title:'post title'},
            property: {name:'name'.title:'title'.description:'desc'}}}}Copy the code
<my-component v-bind="property" :post-title="post.title"/>
Copy the code
export default {
    name:'MyComponent'.props: ['title'.'name'.'description'.'postTitle']}Copy the code

Unidirectional data flow

To make the data flow clearer, Vue stipulates that the Prop pass between the parent and child can only be a one-way downlink binding, meaning that the update of the parent Prop will flow down to the child and trigger the child update, but not the other way around, to prevent the child from accidentally changing the state of the parent.

If you force changes to a prop passed by the parent in a child component, Vue throws a warning on the console ⚠️

Common situations in which a PROP change is required are:

Receives an initial value passed by the parent component through prop and needs to change the value.

It is recommended to convert the parent prop to the component's own 'data'.Copy the code

Prop passed in by the parent component needs to be transformed to be used

Using the 'computed' attribute is recommended.Copy the code

A value of a reference type, such as an array or object, can easily be mismodified in a child component, affecting the state of the parent component.

Prop validation and type checking

Instead of just an array of strings, provide an object that validates the value in props.

Simple type validation vs. custom type validation:

{
    props: {name:String.post: [Object.Array].author:Person,
        symb:Symbol}}Copy the code

Default or required:

{
    props: {name: {type:String.default:'jack'
        },
        age: {type:Number.default:function(){
                if(sex==='male') {return 10;
                }
                
                return 9; }},sex: {type:Number.required:true}}}Copy the code

Custom validation functions:

{
    props: {propF: {
          validator: function (value) {
            This value must match one of the following strings
            return ['success'.'warning'.'danger'].indexOf(value) ! = = -1}}}}Copy the code

Vue will generate a console warning when prop validation fails. Note that these prop are validated before the component instance is created, so there is no access to the component instance from default, Validator, etc.

The Attribute of the Prop

A Prop must be an Attribute, but not all Attrbiute are. Only the Attribute declared in the props option of the component will be Prop.

The component accepts all attributes by default and adds them to the root element of the component, with the benefit of future component extensions.

The Attribute of the inheritance

Through component inheritAttrs: true | false option can be opened/closed component Attribute inheritance. Inheritance is enabled by default, in which case non-prop attributes added for the component are automatically attached to the root element of the component.

export default {
  name: "MyInput".inheritAttrs:true.template:'<input />'
};
Copy the code
<my-input type="text" size="15" placeholder="please enter your username" />
Copy the code

The final rendered HTML results in:

<input type="text" size="15" placeholder="please enter your username">
Copy the code

If inheritAttrs is set to false, the result of rendering is

<input>
Copy the code

Attributes are replaced and merged

Attribute inheritance creates a new problem. If the component’s root element already has the same Attribute passed in by the parent, Vue replaces the value set in the component with the value passed in. However, with class and style attributes, Vue is a little smarter, merging incoming values rather than replacing them.

The distribution of Attribue

To enhance the ability to write the underlying component, we sometimes need to disable Attribute inheritance. We don’t always want the root element of the component to inherit the Attribute, but can be manually assigned by the developer. Thankfully, by combining the component instance’s $attrs Attribute with the component’s inheritAttrs option, we can manually determine which elements the Attribute should be assigned to.

Vue.component('base-input', {
  inheritAttrs: false.props: ['label'.'value'].template: `  `
})
Copy the code

This pattern allows you to use base components more like raw HTML elements, without worrying about which element is the real root element.

Note that the inheritAttrs: false option does not affect the style and class bindings.