1. 监听子组件的生命周期例如有父组件Parent和子组件Child，如果父组件监听到子组件挂载mounted就做一些逻辑处理，常规写法可能如下：
// Parent.vue <Child @mounted="doSth" /> //Child.vue mounted(){ this.$emit('mounted'); }
这里提供一种简便的方法，子组件无需做任何处理，只需要在父组件引用子组件时使用@hook方法来监听即可，代码如下：
// Parent.vue <Child @hook:mounted="doSth" /> methods:{ doSth(){ //some codes here } }当然这里不仅仅是可以监听到mounted，其他生命周期的事件都可以监听到，例如created updated等等。
2.render函数 1.render函数的作用： Vue推荐在绝大数情况下实用模板创建你的HTML，然而当某些特殊场景使用template创建HTML会显得代码繁琐冗长，如根据一个为`level`的prop动态创建标题的 组件，你可能想到这样写：
//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>显然template用在这里不合适，我们来看一下用render函数重写这个组件
//Parent.vue <template> <div> <Child :level="1">Hello World</Child> </div> </template> <script> export default { component:{ child:{ render(creatElement){ return creatElement( 'h'+this.level, //标签名称 { style:{ color:'#f60' } }, //标签中的属性 this.$slots.default //子节点数组 ) }, props:{ level:{ required:true, type:Number } } } } } </script>2.render函数的返回值：Vnode(即虚拟节点) 3.render函数的参数：createElement createElement本身也是一个函数，且有三个参数： * 要创建的节点: (必填) { string | object | function }，可以是要创建的HTML标签名称，也可以是组件对象，也可以是解析上述任何一种的一个异步函数 * 标签中的属性: (可选) { object } * 子虚拟节点: (可选) { string | array } 由createElement()构建而成，可以使用字符串来生成“文本虚拟节点”
3.当传输数据较多时，无需一一绑定props的小技巧：$attrs
vm.$attrs 简单来说$attrs保存的是父组件中未绑定props的属性值
//父组件 <template> <div> <child1 :aa="aa" :bb="bb" :cc="cc"></child1> </div> </template> <script> import Child1 from './component/child1.vue'; export default { name: 'demo', data() { return { aa: 'attrs-aa', bb: 'attrs-bb', cc: 'attrs-cc', }; }, components: { Child1 }, methods: { reduce() { this.dd--; } } }; </script> //子组件1 <template> <div> <p>child1获取的attrs：{{$atrrs}}</p> <child2 :msg="msg" v-bind="$attrs"></child2> </div> </template> <script> import child2 from './child2.vue'; export default { name: 'demo1', data() { return { msg:"msg" }; }, components: { child2 }, methods: { } </script> //子组件2 <template> <div> <p>child2获取的attrs：{{$atrrs}}</p> </div> </template> <script> export default { name: 'demo2', data() { return {}; } </script>转载于:https://www.cnblogs.com/AIonTheRoad/p/11115430.html
相关资源：JAVA上百实例源码以及开源项目