一、函数式组件和普通组件的区别
- 渲染快
- 没有实例，意味着没有（this）
- 没有生命周期（没有响应式数据）
二、组件函数的使用
1. 以局部组件为例，将组件标记为 functional=ture;
因为函数式没有实例，因此组件需要的一切都是通过 context 参数传递，它是一个包括如下字段的对象：
props：提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数，返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。data：传递给组件的整个数据对象，作为createElement的第二个参数传入组件parent：对父组件的引用listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是data.on的一个别名。injections: (2.3.0+) 如果使用了inject选项，则该对象包含了应当被注入的属性。
在添加 functional: true 之后，需要更新我们的锚点标题组件的渲染函数，为其增加 context参数，并将 this.$slots.default 更新为 context.children，然后将 this.level 更新为 context.props.level。
因为函数式组件只是函数，所以渲染开销也低很多。
在作为包装组件时它们也同样非常有用。比如，当你需要做这些时：
- 程序化地在多个组件中选择一个来代为渲染；
- 在将
children、props、data传递给子组件之前操作它们。
1 data() { 2 return { 3 changer:1 4 } 5 },
1 components: { 2 MyCmp:{ 3 functional:true, //必要的设置 4 render: function (createElement, context) { 5 function getcomp(cmp){ 6 console.info(this); //输出为undefined，证明没有实例 7 if(cmp==1){ 8 return comp1; 9 }else{ 10 return comp2 11 } 12 } 13 return createElement(getcomp(context.props.changer), 14 { 15 props:{ 16 cmpData:context.props.data //为子组件传递数据 17 } 18 } 19 ); 20 },
2. 定义要渲染的组件
1 var comp1={ 2 props:['cmpData'], 3 render:function(createElement,context){ 4 return createElement('el-input',{ 5 props:{ 6 type:this.cmpData 7 } 8 }); 9 }, 10 mounted() { 11 console.log(this) //这个组件为正常组件 12 }, 13 } 14 var comp2={ 15 props:['cmpData'], 16 render:function(createElement,context){ 17 return createElement('el-button',{ 18 props:{ 19 type:this.cmpData 20 } 21 }); 22 }, 23 mounted() { 24 console.log(this) //正常组件 25 }, 26 }
三、在父组件中使用
1 238 94 5 6 7