Vuejs Component Example code for props data transfer

This information comes from the official document: http://cn.vuejs.org/guide/components.html # Props

This article is on the basis of official documents, more detailed explanation, more and more complete code.

Simply put, it is more suitable for beginners to read

props Data Transfer

① Scope of the component instance:

Is isolated. Simply put, even if there are attributes with the same name between components, the values are not shared.

<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 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 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 property of the parent component cannot be passed

"3" overrides the 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"}; 
        } 
      } 
    } 
  }); 
</script> 

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

"4" Hump Writing

If the interpolation is hump-like, and in the html tag, because the characteristics of html are case-insensitive (for example, LI and li are identical), the values to be passed in the html tag should be written as dash lines (for example, btn-test) to be case-sensitive.

In the array of props, it should keep 1 with interpolation and be written as hump (such as btnTest).

For example:

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

Correct writing:

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

If interpolation write short horizontal line type, or html label write hump type, do not work normally. (Unless the interpolation is not written as a hump-skipping the case limit.)

③ Using props to bind dynamic data:

Simply put, it is to keep the interpolation of a child component and the data of the parent component 1.

The standard writing is (using v-bind):

<add v-bind: Values of subcomponents =" Properties 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 subcomponent with the same name is overwritten  
        } 
      } 
    } 
  }); 
</script> 

Description:

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

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

"3" That is, those who use v-bind use the value of the parent component (according to the attribute name), while those who do not use v-bind use the value in the tag as a string.

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

④ Literal quantity and dynamic grammar:

"1" Simply put, without v-bind, the literal quantity is passed, that is, as a string (for example, 1 is also a string, not number type);

"2" plus v-bind, passing an JS expression (hence the value of the parent component);

"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, think of it as an 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 value of btn is 3 (instead of 1 +2 of the string without v-bind)

⑤ Binding type of props:

"1" Simply put, it can be divided into two types, namely, one-way binding (parent component can affect child component, but the opposite is not true) and two-way binding (child component can also affect parent component);

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

<div id="app"> 
   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> 

Description:

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 does not change, and if the value of the parent component is modified again, the child component will synchronize again.

Also note that if the sub-component is to be bound synchronously, the input of the sub-component needs to be v-model, not value (then only single binding, and the binding will be lost after modifying the value of the sub-component)

"3" Two-way binding:

Need to use ". sync" as a modifier

For example:

<div id="app"> 
   Parent component:  
  <input v-model="val"><br/> 
   Subcomponents:  
  <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 one you change, the other one will change accordingly.

"4" props Verification:

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

It is written by changing props into an object, verifying key whose value is an object, and verifying value corresponding to key.

For example:

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

Verify that the test variable is bidirectional, and if not, report an error. Note that this cannot be used to validate one-way bindings.

The sample code is as follows:

<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> 

0

For more authentication types, please see the official tutorial: http://cn.vuejs.org/guide/components.html # Prop__u9A8C_u8BC1