This article comes from the official document:/guide/#Props
This article is based on the official documentation, with more detailed explanations and more complete codes.
Simply put, it is more suitable for beginners to read
Props data delivery
①Scope of component instances:
It is isolated, and simply put, the values are not shared between components, even if there is an attribute of the same name.
<div >
<add></add>
<del></del>
</div>
<script>
var vm = new Vue({
el: '#app',
components: {
"add": {
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "123"};
}
},
del: {
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "456"};
}
}
}
});
</script>
The rendering result is:
2 buttons, the first one has a value of 123 and the second one has a value of 456 (although they are both btn)
② Use props to bind static data:
[1] This method is used to pass strings, and the value is written on the parent component's custom element.
【2】The following example cannot pass the value in the data attribute of the parent component
【3】It will overwrite the value of the same name in the data attribute of the template.
Sample code:
<div >
<add btn="h"></add>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "123"};
}
}
}
});
</script>
Under this writing method, the value of btn is h, not 123, or hello.
【4】Camel writing method
If the interpolation is camel, but in the html tag, since the characteristics of html are case-insensitive (such as LI and li are the same), the value to be passed in the html tag should be written as short horizontal line (such as btn-test) to be case-sensitive.
In the props array, it should be consistent with the interpolation and written as camel (such as btnTest).
For example:
props: ['btnTest'],
template: "<button>btn：{{btnTest}}</button>",
Correct writing:
<add btn-test="h"></add>
If the interpolation is written in a short horizontal line type, or the html tag is written in a camel style, it will not take effect normally. (Unless the interpolation is not written as camel-skipping the case limit)
③Bind dynamic data using props:
Simply put, it is to make a certain interpolation of the child component consistent with the data of the parent component.
The standard way to write it is (using v-bind):
<add v-bind:The value of the child component="Properties of parent component"></add>
As code
<div >
<add v-bind:btn="h"></add>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn：{{btn}}</button>",
data: function () {
return {'btn': "123"}; //The value of the same name of the child component is overwritten }
}
}
});
</script>
illustrate:
【1】The value of h in the parent component data used by btn;
【2】The return value in the function of the data of the child component is overwritten.
[3] In other words, the value of the parent component (based on the attribute name) is used, and the value of the label is used as a string.
【4】It still needs to use props, otherwise it will use the value of btn in its data
④Literal and dynamic syntax:
[1] Simply put, if you do not add v-bind, you pass a literal quantity, that is, you are treated as a string (for example, 1 is also a string, not a number type);
【2】Add v-bind, the JS expression is passed (so the value of the parent component can be passed);
【3】After adding v-bind, if the value of the parent component can be found, then the value of the parent component is used; if there is no corresponding one, it is regarded as a js expression (for example, 1+2 is regarded as 3, {a:1} is regarded as an object);
As code:
<div >
<add v-bind:btn="1+2"></add>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn：{{btn}}</button>"
}
}
});
</script>
The value of btn here is 3 (rather than 1+2 as string without adding v-bind)
⑤Props binding type:
[1] Simply put, it is divided into two types, namely one-way binding (the parent component can affect the child component, but the opposite is not possible) and two-way binding (the child component can also affect the parent component);
【2】One-way binding example: (default, or use .once)
<div >
Parent component：
<input v-model="val"><br/>
Subcomponents：
<test v-bind:test-Val="val"></test>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components: {
"test": {
props: ['testVal'],
template: "<input v-model='testVal'/>"
}
}
});
</script>
illustrate:
When the value of the parent component is changed, the value of the child component also changes;
When the value of the child component is changed, the value of the parent component will not change. If the value of the parent component is modified again, the child component will be synchronized again.
It should also be noted that if a child component wants to be bound synchronously, the input of the child component needs to be v-model, not a value attribute (that can only be single-item binding, and the binding will be lost after modifying the value of the child component)
【3】Bi-way binding:
".sync" is required as a modifier
As an example:
<div >
Parent component：
<input v-model="val"><br/>
Subcomponents：
<test :="val"></test>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components: {
"test": {
props: ['test'],
template: "<input v-model='test'/>"
}
}
});
</script>
The effect is that no matter which value you change, the other will change accordingly.
【4】props verification:
Simply put, when the component obtains data, it is used for verification, and it will only be used if the conditions meet.
The writing method is to turn props into an object, the value being verified is the key of the object, and the verification condition is the value corresponding to the key.
For example:
props: {
test: {
twoWay: true
}
},
Verify that the test variable is two-way bound, and if it is not, an error will be reported. (Note that this cannot be used to verify one-way binding).
The sample code is as follows:
<div >
Parent component：
<input v-model="val"><br/>
Subcomponents：
<test :test="val"></test>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components:{
test:{
props: {
test: {
twoWay: true
}
},
template: "<input v-model='test'/>"
}
}
});
</script>
For more verification types, please see the official tutorial:/guide/#Prop__u9A8C_u8BC1
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.