Vuejs Nineth Chapter of the component scope and props data transfer examples _javascript skills

This information is available in the Official document:

Http://cn.vuejs.org/guide/components.html

This tutorial is a set of more detailed, more comprehensive tutorials, especially for novice readers, combined with official documents.

Props data transfer

① the scope of the component instance:

is isolated, simply, the value is not shared between components and components, even if there is an attribute of the same name.

<div id= "App" > 
<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 "}} 
} 
); 

The rendering results are:

2 buttons, the first value is 123, and the second value is 456 (although they are all btn)

② use props to bind static data:

"1" This method is used to pass a string, and the value is written on the parent component's custom element.

"2" in the following example, the value in the Data property of the parent component cannot be passed

"3" overrides a value of the same name in the Data property of the template.

Sample code:

<div id= "App" > 
<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 '}} 
} 
} 
}); 

In this notation, the value of BTN is H, not 123, or hello.

"4" Hump writing

If the interpolation is hump-style,

In HTML tags, because the attributes of HTML are case-insensitive (such as Li and Li), the values to be passed in HTML tags are written in short horizontal lines (such as btn-test) to be case-sensitive.

In the props array, it should be consistent with the interpolation, written as a hump (such as btntest).

For example:

Props: [' btntest '], 

The correct wording:

If the interpolation to write a short line, or HTML tags written in the hump, can not be effective. (unless the interpolation is not written as a hump--skip the case limit, you can)

③ bind Dynamic Data using props:

In simple terms, it is to have a child component interpolation that is consistent with the parent component's data.

The standard notation is (using V-bind):

such as code

<div id= "App" > 
<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 child component with the same name is overwritten}}} 
); 

Description

The value of h in the parent component data used by "1" BTN;

The return value in the function of data for the "2" subassembly is overwritten.

"3" In other words, using the V-bind is using the value of the parent component (according to the property name), not using the V-bind is to use the value in the label as a string.

"4" still needs to use props, otherwise he will take the value of the btn in his own data.

④ literal and dynamic syntax:

"1" In simple terms, without v-bind, passing is literal, that is, as a string (for example, 1 is also a string, not the number type);

"2" plus v-bind, the pass is a JS expression (so you can pass the value of the parent component);

"3" plus v-bind, if the value of the parent component is found, the value of the parent component is used, and if there is no corresponding, it is considered a JS expression (for example, 1+2 as 3,{a:1} as an object);

such as code:

<div id= "App" > 
<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>"}} 
); 

Here the value of the BTN is 3 (not without v-bind when the string is 1+2)

⑤props type of binding:

"1" In simple terms, divided into two types, namely one-way binding (the parent component can affect the child component, but not the opposite) and two-way binding (subcomponents can also affect the parent component);

"2" One-way binding example: (Default, or using. Once)

<div id= "App" > 
parent components: 
<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 '/> '}} 
); 

Description

When the value of the parent component is changed, the value of the child component changes as well;

When a child component's value is changed, the parent component's value does not change, and if the value of the parent component is modified again, the child component synchronizes again.

Also note that if a subassembly is to be synchronized, the input needs of the subassembly are V-model, not the Value property (that can only be a single binding, and the binding will be lost if the child component's value is modified)

"3" Two-way binding:

Need to use ". Sync" as a modifier

As an example:

<div id= "App" > 
parent components: 
<input v-model= "val" ><br/> 
subcomponents: 
<test:test.sync= "Val" ></test> 
</div> 
<script> 
var vm = new Vue ({ 
el: ' #app ', 
data: { 
val:1< c11/>}, 
components: { 
"test": { 
props: [' Test '], 
Template: "<input v-model= ' test '/>" 
} 
} 
}); 

The effect is that no matter which value you change, the other one will change.

"4" Props Verification:

In short, when the component gets the data, it is validated and is used only when the conditions are met.

The writing is to change the props into an object, which is verified that the value is the key of the object, and the validation condition is the value corresponding to the key.

For example:

Props: { 
test: { 
twoway:true 
} 

Verify that the variable is not two-way bound and, if not, an error. (Note that this cannot be used to validate one-way bindings).

The sample code is as follows:

<div id= "App" > 
parent component: 
<input v-model= "val" ><br/> 
subassembly: 
<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>

More authentication types Check the official tutorials:

Http://cn.vuejs.org/guide/components.html

The above is a small set to introduce the Vuejs nineth part of the component scope and props data transfer examples, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!