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

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 //为子组件传递数据
          }
        }
        );
      },

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>

// @returns {VNode}
createElement(
 // {String | Object | Function}
 // 一个 HTML 标签名、组件选项对象，或者
 // resolve 了上述任何一种的一个 async 函数。必填项。
 'div',
 // {Object}
 // 一个与模板中属性对应的数据对象。可选。
 {
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 属性内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
 },
 // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
 // 赋值，因为 Vue 已经自动为你进行了同步。
 directives: [
  {
   name: 'my-custom-directive',
   value: '2',
   expression: '1 + 1',
   arg: 'foo',
   modifiers: {
    bar: true
   }
  }
 ],
 // 作用域插槽的格式为
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
  default: props => createElement('span', props.text)
 },
 // 如果组件是其它组件的子组件，需为插槽指定名称
 slot: 'name-of-slot',
 // 其它特殊顶层属性
 key: 'myKey',
 ref: 'myRef',
 // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
 // 那么 `$refs.myRef` 会变成一个数组。
 refInFor: true  
 },
 // {String | Array}
 // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
 // 也可以使用字符串来生成“文本虚拟节点”。可选。
 [
  '先写一些文字',
  createElement('h1', '一则头条'),
  createElement(MyComponent, {
   props: {
    someProp: 'foobar'
   }
  })
 ]
)