Vue- Component 1

• Both methods use the component
• Use props to transfer data
• Unidirectional data flow
• Components named
• data verification

 

The components Vue

• Examples of components are reusable Vue
• Components recommended naming lowercase, with - connection
• In component definitions, Template addition, there are other options: data, methods, computed
• Component definition data must be a method

 

Both methods use the component

• Global registration

<my-component></my-component>

Vue.component ( 'My-Component' , { 
   Template: '<div> assembly contents </ div>' 
})

 

• Local registration

var App = new new Vue ({ 
   EL: '#app' , 
   Components: {
        '' MY- Components: { 
            Template: '<div> assembly contents </ div>' 
        } 
     }   
})

 

Use props to transfer data

Side of the props using an array of ways

Parent components pass data to subassembly

v-bin parent component content dynamically bound pass

< Div the above mentioned id = "App" style = "width: 300px; height: 200px; border: 2px Solid Skyblue" > 
  < Child-the Component msg = "I am content in the parent component" > </ Child-the Component > 
  < HR > 
 < ! -   V-dynamic binding the bind dynamic data input of the subassembly to pass sth -> 
  < input type = "text" V-Model = "dadmsg" > 
  < the bind-component : sth = "dadmsg" > </ the bind-Component > 
</ div >

var app = new Vue({
  el: '#app',
  data: {
    dadmsg: 'happy'
  },
  components: {
    'child-component': {
      props: ['msg'],
      template: '<div>{{msg}}</div>'
    },
    'bind-component': {
      props: ['sth'],
      template: '<div>{{sth}}</div>'
    }
  }
})

Props used in the assembly to receive parameters from parent component, the props properties, can be used directly in the assembly.

 

Unidirectional data flow

Understanding of the concept: the data transmission is one-way through the props, the data is transmitted to the parent sub-assembly component variations, but not vice versa.

Objective: Sons component solution is issued, to avoid inadvertently modifying subassembly modify the state of the parent component.

Scenario two modifications prop situation

• Transmitting an initial value of the parent component, subassembly can save it as an initial value, can be modified freely in their scope;
• The data passed in stored as an initial value

1. Registration component
2. The data passed in parent element, and received in the subassembly props
3. The data passed in from the initial value saved

< Div the above mentioned id = 'App' > 
  < Child-the Component msg = 'have to work hard today, ah' > </ Child-the Component > 
</ div >

let app = new Vue({
  el: '#app',
  components: {
    'child-component': {
      props: ['msg'],
      template: '<div>{{count}}</div>',
      data() {
        return {
          count: this.msg
        }
      }
    }
  }
})

 

prop values ​​need to be converted as the original incoming, it is calculated again by calculating properties

1. Registration component
2. The parent element data passed in, and used in the subassembly receiving props
3. The data passed in is recalculated by calculating the properties and render the page

<div id="app">
  <input type="text" v-model="width">
  <width-component :width='width'></width-component>
</div>

let app = new Vue({
  el: "#app",
  data: {
    width: 0
  },
  components: {
    'width-component': {
      props: ['width'],
      template: '<div :style="style"></div>',
      computed: {
        style() {
          return {
            width: this.width + 'px',
            background: 'red',
            height: '30px'
          }
        }
      }
    }
  }
})

 

Components named

camelCased (Camel)

kebabcase (dash name)

• Html assembly, the parent component subassembly to pass data, you must use dashes named.  (A-bc √ aBc ×)
• In the props, the dashes name and hump naming can be.
• In the template, you must use camelCase, dashes error.
• In the data, the use this.xxx, you must use the hump named , dashes error.
• Named components, dashes name and hump naming can be.

 

data verification

Side of the props object-way

Verifiable Type: Number String Boolean Array Object Function Custom

<div id="app">
  <style-component :a='a' :b='b' :c='c' :d='d' :e='e' :g='g'></style-component>
</div>

App = the let new new Vue ({ 
  EL: '#app' , 
  Data: { 
    A: . 1 , 
    B: '2' , 
    C: '', // empty string, it takes the default to true 
    D: [111, 222, 333 ], 
    E: the console.log (), 
    G: . 3 
  }, 
  Components: {
     'styleComponent' : { 
      The props: { 
        // digital type 
        A: { 
          type: number The, 
          required: to true  // will pass 
        },
         // character string type 
        b: { 
          type: [String, Number] 
        }, 
        // boolean 
        C: { 
          type: Boolean, 
          default : to true  // Default 
        },
         // array or object is returned as the default value is a function of 
        D: { 
          type: the Array, 
          default : function () {
             return [] 
          } 
        }, 
        // function type 
        E: { 
          type: function 
        }, 
        // custom a function 
        G: { 
          Validator: function (value) {
             return value <10 
          }
        }

      },
      template: '<div>{{a}}--{{b}}--{{c}}--{{d}}--{{g}}</div>'
    }
  }
})