Analysis on the use of vue component components

component use

Registration of component

1. Global registration

Use Vue. component ('componentName', {template: ' < div class="tem1" > hello world < /div > '}) before initializing the instance.

componentName Custom Name

Use under the scope declared by the instance < componentName > < /componentName > The successful rendering effect is' < div class="tem1" > hello world < /div >

Vue.component('my-component',{ 
      template:'<div class="tem1">hello world</div>' 
    }  

Data in the component uses the

component cannot use the data of the instance, but you can declare variables using data in component, and data can only be used as a function

Vue.component('my-component',{ 
      template:'<div class="tem1">hello world {{comdata}}</div>', 
      data:function(){return {comdata:'hehe'}} 
    });

2. Local hosting

Setting components in an instantiated new Vue

var app=new Vue({ 
      el:'#app', 
      components:{'example':{template:'<div>children template</div>'}} 
    }) 

Data in the component uses the

var app=new Vue({ 
      el:'#app', 
      data:{num:220}, 
      components:{ 
        'example':{ 
          template:'<div>children template{{mydata}}</div>', 
          data:function(){return {mydata:' mydata=data'};} 
        } 
 
      } 
    })

Note: An error will be reported if the component cannot use the parameters of the instance data: {num: 220}

Component also supports methods, and other attributes such as computed will not conflict and remain relatively independent

At this time, we must consider the data communication between different components

vue js in summary, data is transmitted through props down events up

Use props declaration for parent call data and events declaration for subset calls