Vue函数式组件的应用实例详解

一、函数式组件和普通组件的区别

二、组件函数的使用

　　1.以局部组件为例，将组件标记为functional=ture;

因为函数式没有实例，因此组件需要的一切都是通过context参数传递，它是一个包括如下字段的对象：

在添加 functional: true 之后，需要更新我们的锚点标题组件的渲染函数，为其增加 context参数，并将 this.$slots.default 更新为 context.children，然后将 this.level 更新为 context.props.level。

因为函数式组件只是函数，所以渲染开销也低很多。

在作为包装组件时它们也同样非常有用。比如，当你需要做这些时：

data() {    return {      changer:1    }  },

components: {    MyCmp:{      functional:true,  //必要的设置      render: function (createElement, context) {        function getcomp(cmp){          console.info(this); //输出为undefined，证明没有实例          if(cmp==1){            return comp1;           }else{            return comp2          }        }        return createElement(getcomp(context.props.changer),        {          props:{            cmpData:context.props.data //为子组件传递数据          }        }        );      },

 2. 定义要渲染的组件

var comp1={  props:['cmpData'],  render:function(createElement,context){    return createElement('el-input',{      props:{        type:this.cmpData      }    });  },  mounted() {    console.log(this) //这个组件为正常组件  },}var comp2={  props:['cmpData'],  render:function(createElement,context){    return createElement('el-button',{      props:{        type:this.cmpData      }    });  },  mounted() {    console.log(this) //正常组件  },}

三、在父组件中使用

<template>  <div>    <el-input v-model="changer" placeholder="子组件"></el-input>    <my-cmp :changer="changer"></my-cmp>  </div></template><script>