This is the 16th day of my participation in the August More Text Challenge

Component parameter verification

The parent component passes something to the child component, and the child component has the authority to impose constraints on the received content (that is, the parameters that the component receives are rule-definable). These constraints are component parameter verification.

Scenario requirement: When a parent component calls a child component, the content passed must be a string.

Solution: Define an object for the props received and specify the type.

props:  {
    content: String
},
Copy the code

Requirement upgrade: If THE parameter type I need is string or array.

props:  {
    content: [String, Number]
},
Copy the code

More complex parameter verification: The subcomponent receives the passed parameter through props and describes the passed parameter as having the following properties:

  • Type — Parameter type
  • Required — Whether it is required
  • Default — The value passed by default
  • Validator — Custom validator that requires string length, etc
props:  {
    content: {
            type:  String, 
            required: true,
            default: 'default value',
            validator: function(value) {
                    return (value.length > 5)
            }
    }
},
Copy the code

Non-props feature and props feature

Props feature (Mapping between parent and child components)

When a parent component passes a value to a child component through an attribute (such as content), the child component declares the data for that attribute (such as Content) in props. When a parent component has an attribute (such as Content) about data transfer, this attribute is the props attribute.

Key points:

  • Attribute passing with child components does not appear in the DOM;

  • After the parent component passes the property, the child component retrieves the content of the property either through the interpolation in template or through this.content

Non-props features (Few scenarios)

The parent component passes a property to the child component, but the child component does not have the content for props, that is, the child component does not say that I want to receive the content passed by the parent component.

<div id="root">
    <child content="123" ></child>
</div>
var child = {
        template: '<div>{{content}}</div>'
}
Copy the code

An error is reported: the parent component’s property content is not defined

After removing references from the child component, you can see that the Content property (that is, the non-props feature) is displayed in the DOM tag properties of the page template in the child component Template.

<div id="root"> <child content="123" ></child> </div> var child = {template: '<div> child content </div>'}Copy the code

The characteristics of props

  • If the child component does not define props to receive values from the parent component attribute, then this attribute (such as Content) is a non-props attribute.

  • If the parent component uses a non-props feature, the child component does not receive property data through peopes, but the property is displayed in the dom tag properties of the page template in the child component Template.