Vue development of techniques commonly used

1. lifecycle listeners subassembly
e.g. has a parent component and subassembly Parent Child, if the parent component mount subassembly mounted to the monitor to do some processing logic, it may be written as follows routine:

// Parent.vue
<Child @mounted="doSth" />

//Child.vue
mounted(){
　　this.$emit('mounted');
}

　　

Here to provide a simple method, sub-assemblies without having to do anything, just use references when the parent component sub-assemblies @hook way to listen to, as follows:

// Parent.vue
<Child @hook:mounted="doSth" />

methods:{
　　doSth(){
　　　　//some codes here
　　}
}

Of course, you can listen to here is not just mounted, other life cycle events can be monitored, for example, created updated and so on.

2.render function
　　role 1.render function:
　　Vue recommends creating your HTML in most instances practical template, however, when some special scenes using the template to create HTML code that will seem cumbersome, lengthy, as according to one of the `level` prop dynamic component for creating a title, you might think to write:

//Parent.vue
<Child :level="1" >hello world</Child>
//Child.vue
<template>
　　<div>
　　　　<h1 v-if="level===1">
　　　　　　<slot></slot>
　　　　</h1>
　　　　<h2 v-if="level===2">
　　　　　　<slot></slot>
　　　　</h2>
　　　　<h3 v-if="level===3">
　　　　　　<slot></slot>
　　　　</h3>
　　　　<h4 v-if="level===4">
　　　　　　<slot></slot>
　　　　</h4>
　　　　<h5 v-if="level===5">
　　　　　　<slot></slot>
　　　　</h5>
　　　　<h6 v-if="level===6">
　　　　　　<slot></slot>
　　　　</h6>
 　　</div>
</template>

<script>
　　export default{
　　　　props:["level"]
　　}
</script>

Obviously template used here is inappropriate, we look at this assembly to rewrite a render function

// Parent.vue 
<Template> 
　　<div> 
　　　　<Child: Level = ". 1"> the Hello World </ Child> 
　　</ div> 
</ Template> 
<Script> 
　　Export default { 
　　　　Component: { 
　　　　　　Child: { 
　　　　　　　　the render (creatElement) { 
　　　　　　　　　　return creatElement (
　　　　　　　　　　　　 'H' + the this .level, // tag name 
　　　　　　　　　　　　{ 
　　　　　　　　　　　　　　style: { 
　　　　　　　　　　　　　　　　Color: '# F60' 
　　　　　　　　　　　　　　} 
　　　　　　　　　　　　}, // properties tab 
　　　　　　　　　　　　the this .. $ slots default  // child array 
　　　　　　　　　　)  
　　　　　　　　},
　　　　　　　　the props:{
　　　　　　　　　　level:{
　　　　　　　　　　　　required:true,
　　　　　　　　　　　　type:Number
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
　　}
</script>

　　2.render return value of the function: Vnode (ie virtual node)
　　parameter 3.render function: createElement
　　　createElement itself is a function, and there are three parameters:
　　　* node to be created: (Required) {string | object | function} , HTML tag name is to be created may be a component object, it may be resolved in any of the above asynchronous function a
　　　* tag attributes: (optional) {Object}
　　　* child virtual node: (optional) {string | array} constructed from createElement (), can be used to generate a character string "text virtual node"