vue函数组件解决过多的v-if嵌套 render

 render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.value,
                                autofocus: true,
                                placeholder: 'Please enter your name...'
                            },
                            on: {
                                input: (val) => {
                                    this.value = val;
                                }
                            }
                        })
                    }

var res = Vue.compile('<div><span>{{ msg }}</span></div>')
 
new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

使用compile 增强 render函数

<script>
export default {
  props: {
    type: {
      type: String,
      default: "normal"
    },
    text: {
      type: String,
      default: "normal"
    }
  },
  render(h) {
    //  单个数据render函数
    return h("button", {
      //给div绑定样式
      style: {
        color: "#F00"
      },
      attrs: {
        id: "foo"
      },
      class: {
        bnt: true,
        success: this.type == "success",
        "bnt-danger": this.type == "danger",
        "bnt-warning": this.type == "warning",
        normal: !this.type
      },
      domProps: {
        innerText: this.text || "默认"
      },
       on: {
        click: () => {
          console.log("点击事件");
        }
      }
    });
      },
      };
</script>
<style scoped>
.bnt {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.success {
  background-color: #0f0;
}
.bnt-danger {
  background-color: #f00;
}
.bnt-warning {
  background-color: #ff0;
}
.normal {
  background-color: #ccc;
}
</style>
  //   {
  //  // 和`v-bind:class`一样的 API
  //  'class': {
  //   foo: true,
  //   bar: false
  //  },
  //  // 和`v-bind:style`一样的 API
  //  style: {
  //   color: 'red',
  //   fontSize: '14px'
  //  },
   //  // 正常的 HTML 特性
  //  attrs: {
  //   id: 'foo'
  //  },
  //  // 组件 props
  //  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
  //    }
  //   }
  //  ],
  //  // Scoped slots in the form of
  //  // { name: props => VNode | Array<VNode> }
  //  scopedSlots: {
  //   default: props => createElement('span', props.text)
  //  },
   //  // 如果组件是其他组件的子组件，需为插槽指定名称
  //  slot: 'name-of-slot',
  //  // 其他特殊顶层属性
  //  key: 'myKey',
  //  ref: 'myRef'
  // }

这是一个vue的js函数组件 像普通组件一样引入使用,只是render函数渲染的

<script>
export default {
  name: "mycomponent",
  render: function(createElement) {
    return createElement(
      "h" + this.level, // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    );
  },
  props: {
    level: {
      type: String
    }
  }
};
</script>

<template>
  <div class="hello">
     <zj level="2">
       <slot>我是render组件</slot>
     </zj>
  </div>
</template>
 
<script>
import zj from '@/components/A'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    zj
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>