props data transfer

(1) Scope of component instances:

Isolated. Simply put, values are not shared between components even if there is a property with the same name.

1. <div id="app">  
2.     <add></add>  
3.     <del></del>  
4. </div>  
5. <script>  
6.     var vm = new Vue({  
7.         el: '#app',  
8.         components: {  
9.             "add": {  
10.                 template: "<button>btn: {{btn}}</button>",  
11.                 data: function () {  
12.                     return {btn: "123"};  
13.                 }  
14.             },  
15.             del: {  
16.                 template: "<button>btn: {{btn}}</button>",  
17.                 data: function () {  
18.                     return {btn: "456"};  
19.                 }  
20.             }  
21.         }  
22.     });  
23. </script>  

The rendering result is:

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

 

 

(2) Binding static data using props:

[1] This method is used to pass strings with values written on the parent component's custom elements.

[2] Writing in the following example does not pass values from the parent component's data property

[3] Overrides the value of the same name in the template's data attribute.

Sample code:

1. <div id="app">  
2.     <add btn="h"></add>  
3. </div>  
4. <script>  
5.     var vm = new Vue({  
6.         el: '#app',  
7.         data: {  
8.             h: "hello"  
9.         },  
10.         components: {  
11.             "add": {  
12.                 props: ['btn'],  
13.                 template: "<button>btn: {{btn}}</button>",  
14.                 data: function () {  
15.                     return {btn: "123"};  
16.                 }  
17.             }  
18.         }  
19.     });  
20. </script>  

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

 

[4] Hump Writing

If the interpolation is hump-like,

In HTML tags, because html is case insensitive (for example, LI is the same as li), the values to be passed in HTML tags are written as short horizontal lines (for example, btn-test) to be case sensitive.

In props arrays, however, the interpolation should be consistent and written as a hump (such as btnTest).

 

For example:

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

Correct writing:

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

If the interpolation is written in short horizontal lines or the html tag is written in hump mode, it will not work properly.(unless the interpolation is not written as a hump-skip the case limit)

 

 

(3) Binding dynamic data with props:

Simply put, one of the child components'interpolations is consistent with the parent component's data.

 

The standard notation is (using v-bind):

Such as code

1. <div id="app">  
2.     <add v-bind:btn="h"></add>  
3. </div>  
4. <script>  
5.     var vm = new Vue({  
6.         el: '#app',  
7.         data: {  
8.             h: "hello"  
9.         },  
10.         components: {  
11.             "add": {  
12.                 props: ['btn'],  
13.                 template: "<button>btn: {{btn}}</button>",  
14.                 data: function () {  
15.                     return {'btn': "123"};  //Values with the same subcomponent name are overwritten.
16.                 }  
17.             }  
18.         }  
19.     });  
20. </script>  

Explain:

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

The return value in the data function of the subcomponent is overridden.

[3], that is, the value of the parent component (by attribute name) is used with v-bind, and the value in the label is used as a string without v-bind.

[4] props is still required, otherwise he will take the value of btn in his own data

 

 

(4) Literal quantity and dynamic grammar:

[1] Simply put, without v-bind, the literal quantity is passed as a string (e.g., 1 is also a string, not a number type);

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

[3] If the value of the parent component can be found after adding v-bind, then the value of the parent component is used; if there is no corresponding value, it is treated as a js expression (e.g., 1+2 as 3, {a:1} as an object);

 

For example, code:

1. <div id="app">  
2.     <add v-bind:btn="1+2"></add>  
3. </div>  
4. <script>  
5.     var vm = new Vue({  
6.         el: '#app',  
7.         data: {  
8.             h: "hello"  
9.         },  
10.         components: {  
11.             "add": {  
12.                 props: ['btn'],  
13.                 template: "<button>btn: {{btn}}</button>"  
14.             }  
15.         }  
16.     });  
17. </script>  

Here btn has a value of 3 (instead of 1+2 as a string without v-bind)

Binding type of props:

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

 

[2] Example of one-way binding: (default, or use.once)

1. <div id="app">  
2.     Parent component:  
3.     <input v-model="val"><br/>  
4.     Sub-components:  
5.     <test v-bind:test-Val="val"></test>  
6. </div>  
7. <script>  
8.     var vm = new Vue({  
9.         el: '#app',  
10.         data: {  
11.             val: 1  
12.         },  
13.         components: {  
14.             "test": {  
15.                 props: ['testVal'],  
16.                 template: "<input v-model='testVal'/>"  
17.             }  
18.         }  
19.     });  
20. </script>  

Explain:

When the value of the parent component is changed, the value of the child component also changes.

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

It is also important to note that if a subcomponent is to synchronize bindings, the input of the subcomponent needs to be v-model, not a value property (that is, only a single binding, and the bindings will be lost if the subcomponent's value is modified)

 

[3] Binding in both directions:

You need to use'.sync'as a modifier

Example:

1. <div id="app">  
2.     Parent component:  
3.     <input v-model="val"><br/>  
4.     Sub-components:  
5.     <test :test.sync="val"></test>  
6. </div>  
7. <script>  
8.     var vm = new Vue({  
9.         el: '#app',  
10.         data: {  
11.             val: 1  
12.         },  
13.         components: {  
14.             "test": {  
15.                 props: ['test'],  
16.                 template: "<input v-model='test'/>"  
17.             }  
18.         }  
19.     });  
20. </script>  

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

 

[4] Pros validation:

Simply put, when a component acquires data, validates it, and only uses it if it meets the criteria.

 

Writing is to change props into an object, and the value is verified to be the key of the object, provided that the value corresponds to the key.

For example:

1. props: {  
2.     test: {  
3.         twoWay: true  
4.     }  
5. },  

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

 

The sample code is as follows:

1. <div id="app">  
2.     Parent component:  
3.     <input v-model="val"><br/>  
4.     Sub-components:  
5.     <test :test="val"></test>  
6. </div>  
7. <script>  
8.     var vm = new Vue({  
9.         el: '#app',  
10.         data: {  
11.             val: 1  
12.         },  
13.         components:{  
14.             test:{  
15.                 props: {  
16.                     test: {  
17.                         twoWay: true  
18.                     }  
19.                 },  
20.                 template: "<input v-model='test'/>"  
21.             }  
22.         }  
23.     });  
24. </script>  

See the official tutorial for more types of validation:

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