Suitable for: Parent-child component communication.
- If the parent component passes (function) data to the child component: the essence is that the child component passes data to the parent component;
- If the (non-functional) data passed to the child component: the essence is that the parent component passes data to the child component.
The routing component can also pass props data.
1. Prop's upper and lower case
The attribute names in HTML are case-sensitive, and the browser will interpret all uppercase characters as lowercase characters. This means that when you use templates in DOM, the prop name of camelCase (camel nomenclature) needs to be named with its equivalent kebab-case (short horizontal line separated name):
Subcomponents receive data:
('blog-post', {
// In JavaScript it is camelCase (camel nomenclature) props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
Parent component passes data:
<!-- exist HTML Medium Yes kebab-case Short horizontal line separation naming --> <blog-post post-title="hello"></blog-post>
2. Prop type
The child component specifies (restricts) the type of the value of the Prop passed in by the parent component. The user is prompted from the browser's JavaScript console when the child component receives the wrong type.
// Receive data and restrict the data typeprops: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
The Prop type is written like this:
// Simple declaration of receiving (cannot declare data that does not pass)props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
3. Prop verification
The verification method of custom received props in the subcomponent can bepropsThe value in provides an object with verification requirements. If one requirement is not met, Vue will warn in the browser console.
props: {
// Basic type checking (`null` and `undefined` will pass any type verification) propA: Number,
// Multiple possible types propB: [String, Number],
// Required string propC: {
// Type of propC type: String,
// Set propC must be passed required: true
},
// Number with default value propD: {
type: Number,
// propD can be transmitted or not, if it is not transmitted, the value defaults to 100 default: 100
},
// Object with default value propE: {
type: Object,
// The default value of an object or array must be obtained from a factory function default: function () {
return { message: 'hello' }
}
},
// Custom verification function propF: {
validator: function (value) {
// This value must match one of the following strings return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
4. Pass static | dynamic Prop
Pass in a string
Pass static values:
<blog-post title="hello"></blog-post>
prop byv-bindDynamic assignment:
<!-- Dynamically assign a value to a variable，The value of this variable is a string -->
<blog-post v-bind:title=""></blog-post>
<!-- Dynamically assign values to a complex expression ，The sum value is a string-->
<blog-post
v-bind:title=" + ' and ' + "
></blog-post>
......
data() {
return {
post: { title:"aaa", author:"bbb" },
}
}The values passed above are of string type, but any type of value can be passed to prop, such as:
Pass in a number
<!-- even if `42` It's static，Still need `v-bind` Let me tell Vue --> <!-- This is a JavaScript Expression instead of a string。--> <blog-post v-bind:likes="42"></blog-post> <!-- Dynamic assignment with a variable。--> <blog-post v-bind:likes=""></blog-post>
Pass in a boolean value
<!-- Include this prop Including no value，All means `true`。--> <blog-post is-published></blog-post> <!-- even if `false` It's static，Still need `v-bind` Let me tell Vue --> <!-- This is a JavaScript Expression instead of a string。--> <blog-post v-bind:is-published="false"></blog-post> <!-- Dynamic assignment with a variable。--> <blog-post v-bind:is-published=""></blog-post>
Passing in an array
<!-- Even if the array is static，Still need `v-bind` Let me tell Vue --> <!-- This is a JavaScript Expression instead of a string。--> <blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post> <!-- Dynamic assignment with a variable。--> <blog-post v-bind:comment-ids=""></blog-post>
Passing in an object
<!-- Even if the object is static，Still need `v-bind` Let me tell Vue -->
<!-- This is a JavaScript Expression instead of a string。-->
<blog-post
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post>
<!-- Dynamic assignment with a variable。-->
<blog-post v-bind:author=""></blog-post>Pass all properties of an object
<blog-post v-bind="post"></blog-post>
......
post: {
id: 1,
title: 'My Journey with Vue'
}
5. Modify Prop data
If you want to modify the received prop data, you need to redefine it in data. You cannot modify the prop directly, that is, an error will be reported if = "hhh".
<h3>{{ postTitle }}</h3>
<h3>{{ myTitle }}</h3>
<button @click="xiu"></button>
......
// In js is camelCase camel nomenclature props: ['postTitle'],
// If you want to modify the received prop data, you need to redefine it in data. You cannot modify the prop directly, that is, = "hhh" will report an error. ......
data() {
return {
myTitle: ,
}
},
methods: {
xiu() {
= "hhh";
}
}
Note: You can also not write:props: ['postTitle']Come to receive, becausethis.$attrsThere is a postTitle data transmitted in it, which can be used directly. But we generally don't write this way. Because the types cannot be restricted, it means troublesome, etc.
When receivingprops: ['postTitle']hour,this.$attrsThere is no data sent from the postTitle.
This is the end of this article about the detailed explanation of Vue Props instance configuration. For more related Vue Props content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!