vue several components by value ---- Part

By value vue assembly, assembly Sons, brothers component, generational components. Read some presentations and documents as well as some of the learning of the official website of the articles, then write it down. To facilitate later relearning or review.

= Parent component> subassembly

Properties: props

//child
props:{msg:string}


//parent
<HelloWorld  msg="welcome to your Vue.js App"/>

Characteristics: $ attrs

// child: No statement foo in the props, when the value is passed in the characteristics summarized in 
<P> {{}} $ attrs.foo </ P> 


// parent 
<the HelloWorld foo = "foo" />

References: refs

parent //   
<REF = the HelloWorld "HW" /> 

Mounted () { 
    the this. refs.hw.xx $ = 'XXX' // had a subassembly is now modified three x x 
} 


// Child   

<P> XX} {} {</ P> 

 Data () { 
  return { 
   XX: 'X' 
} 
}

Child element: $ child (child elements does not guarantee the order)

//parent

<HelloWorld />

mounted(){
this.$child[0].xx='xxxxx' 
}

//child  

<p>{{xx}}</p>

 data(){
  return{
   xx: 'x'
}
}

　Subassemblies => parent component: Custom Events

Child // 
. the this $ EMIT ( 'the Add', Good) 


// parent 
<the Add the Cart @ = "cartAdd ($ Event)"> <the Cart /> 

PS: Who dispatch who monitor events

Brothers components: components through a common ancestor

Through common ancestors components bypass, $ parent, or $ root.

brother1 // 
the this parent $ $ ON ( 'foo', handle).. 

// brother2 
the this parent $ $ EMIT ( 'foo').. 




Example: (no de-emphasis) 
// parent

<HelloWorld />

<HelloWorld />


//child

mounted(){
this.$on('foo',()=>{
　　console.log('foo....')
})
this.$emit('foo')

}

Between ancestors and descendants

Since the sign excessive layers. Transfer props unrealistic, vue provides provide / inject API to accomplish this task

provide / inject: possible ancestor to offspring by value (similar to the wording of props)

ancestor // 
Provide () { 
  return {foo: 'foo'} 
} 

// the descendant 
Inject: [ 'foo'] 



Examples: 
// ancestors 

Export default { 
  Provide () { 
   return { 
   something: 'something' 
   } 
  } 
} 

// progeny 
Export default { 
　　inject: {// can be directly injected (responsive) 
    MSG: 'something' 
   } 
}

　　First summarizes these, next will summarize usage event bus Bus, vuex and slots. These summaries are learning it in the course commencement summarizing, who are interested can take a look right course commencement. mutual encouragement!

vue several components by value ---- Part

Guess you like