Vuejs Article 9 details on Component scope and props data transfer instances, and vuejs Article 9

Vuejs Article 9 details on Component scope and props data transfer instances, and vuejs Article 9

This document is used in official documents:

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

This tutorial is a set of more detailed and comprehensive tutorials compiled by Alibaba Cloud in combination with official documents. It is especially suitable for beginners to read.

Props Data Transmission

① Scope of the component instance:

Is isolated. In simple terms, values are not shared between components even if they have attributes 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"}; } } } }); </script> 

The rendering result is:

Two buttons. The first value is 123, and the second value is 456 (although both of them are btn)

② Use props to bind static data:

[1] This method is used to pass a string and the value is written on the custom element of the parent component.

[2] in the following example, the value in the data Attribute of the parent component cannot be passed.

[3] will overwrite the value of the same name in the data Attribute 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"}; } } } }); </script> 

In this way, the btn value is h, not 123, or hello.

[4] hump writing

Assume that interpolation is camper,

In html tags, because html is case-insensitive (for example, LI and li are the same, the value to be passed in the html Tag must be in a short horizontal line (such as btn-test) to be case sensitive.

In the props array, it should be consistent with interpolation and written as camper (such as btnTest ).

For example:

props: ['btnTest'], template: "<button>btn：{{btnTest}}</button>", 

Correct syntax:

<add btn-test="h"></add> 

If interpolation is written into a short horizontal line, or html tags are written into a camper, they do not take effect normally. (Except that interpolation is not written as a camper-Skip the case sensitivity restriction)

③ Use props to bind dynamic data:

To put it simply, let the child component have an interpolation that is consistent with the data of the parent component.

The standard format is (using v-bind ):

<Add v-bind: sub-component value = "attributes of parent component"> </add>

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 sub-component with the same name is overwritten }}}); </script>

Note:

[1] the value of h in the parent component data used by btn;

[2] the return value in the data function of the Child component is overwritten.

[3] That is, the value of the parent component (based on the attribute name) is used for v-bind, and the value in the tag is used as a string if v-bind is not used.

[4] still need to use props, otherwise he will use the btn value in his data

④ Literal and dynamic Syntax:

[1] Simply put, without a v-bind, it is passed as a string (for example, 1 is also a string, not a number );

[2] with v-bind, The JS expression is passed (so the value of the parent component can be passed );

[3] After adding v-bind, if you can find the value of the parent component, use the value of the parent component. If there is no corresponding value, consider it as 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>" } } }); </script> 

Here the btn value is 3 (instead of 1 + 2 as a string when v-bind is not added)

⑤ Props binding type:

[1] In simple terms, there are two types: one-way binding (parent component can affect child components, but not vice versa) and two-way binding (child components can also affect parent components );

[2] One-way binding example: (default, or use. once)

<Div id = "app"> parent component: <input v-model = "val"> <br/> sub-component: <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>

Note:

When the value of the parent component is changed, the value of the Child component is also changed;

When the value of the Child component is changed, the value of the parent component does not change. If the value of the parent component is modified again, the child component is synchronized again.

In addition, if the child component needs to be bound synchronously, the input of the Child component must be a v-model, not a value attribute (in this case, only one item can be bound, and the binding will be lost after the sub-component value is modified)

[3] bidirectional binding:

Use ". sync" as Modifier

Example:

<Div id = "app"> parent component: <input v-model = "val"> <br/> sub-component: <test: test. sync = "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:

To put it simply, when the component obtains data, it will be used for verification only when the conditions are met.

The statement is to convert props into an object, verify that the value is the key of the object, and verify that the condition is the value corresponding to the key.

For example:

props: { test: { twoWay: true } }, 

Verify whether the test variable is bidirectional binding. If not, an error is returned. (Note: This cannot be used to verify one-way binding ).

The sample code is as follows:

<Div id = "app"> parent component: <input v-model = "val"> <br/> sub-component: <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, refer to the official Tutorial:

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

The above is a detailed description of the component scope and props data transfer instance in Chapter 9 of Vuejs. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!