Prop
Basic usage
The basic usage of Prop is very simple. You only need to define the property in the Vue instance of the child component and set the value as an array of the target attributes.
('child', {
...
// Receive message props: ['message']
...
})
tips: Since attributes in HTML are case-insensitive, when using templates in DOM (in HTML), camel writing needs to be converted into short horizontal writing. However, if you use a string template (in JS), you are not restricted and you can do whatever you want.
Static and dynamic values in Prop
Under normal circumstances, a dynamic value is generally defined in the parent component through v-bind, and the child component receives the value through Prop. Therefore, many people believe that Prop can only receive dynamic values. However, Prop can actually accept static properties.
Example:
/* Parent component */
<child type="video"></child>
/* Subcomponent */
('child', {
...
// Successfully received props: ['type']
...
})
In the example, the parent component defines a static property type on the child component label, and the child component still obtains the static property type through Prop.
One-way data flow
All props form a one-way downlink binding between their parent and child props: updates to the parent component's Prop will flow down to the child component, but the other way around will not work. This will prevent accidental changes in the state of the parent component and the child component of the same level from the child component, which will make the data flow of your application difficult to understand.
In addition, every time a parent component updates, all Prop in the child component will be refreshed to the latest value. This means you should not change Prop inside the child component, and if you do this, Vue will throw a warning in the console.
Generally speaking, if a child component needs to operate the values in Prop, the value in Prop needs to be assigned to the locally defined properties:
...
props: ['message'],
data () {
return {
mes:
}
}
...
Non-Prop Features
A non-Props feature refers to a property defined on a component without using Prop to accept properties. At this time, the property value cannot be used in the child component, and the property will be directly added to the root node of the child component.
For example, on a child component that only contains one div, if I pass a content property to the child component, but the child component does not use Prop to receive the content property, the rendering result is:
<div > <div content="hello"></div> </div>
Prop verification
There are many forms for child components to receive messages from parent components using Props:
1. Array form
props: [data1, data2]
Array form is equivalent to receiving messages directly without any verification. Generally speaking, it is not recommended to use array form.
2. Simple object form
props: {
data1: String,
data2: Array
}
The simple object form performs type verification on the values passed by the parent component. If the passed value types are inconsistent, the console will report an error.
3. Complex object form
props: {
data1: {
type: String,
required: true,
default: 'default value',
validator (value) {
return ( < 5)
}
},
data2: {
type: Array,
required: true,
default: () => ['', '', '']
}
}
In the case of complex object form, the parameters as object attributes can be written as object form, and the parameter object contains 4 attributes, type, required, default, and validator.
type: Set the parameter type. When the passed parameter type does not match the type, the console will report an error.
required: Set whether the parameter is a must-pass. When set to true, if the parameter is not transmitted, an error will be reported if it does not transmit the parameter.
default: Set the default value. When the parameter type is a complex type, the default value must be generated using factory mode, otherwise Vue will throw a warning in the console. As shown in the figure, an empty array of length 3 is generated through factory mode.
validator: Verifier, is a function that has a formal parameter representing the incoming value, and can customize various verifications. When false is returned, an error will be reported, indicating that the verification is not passed.