render函数使用

<script>
export default {
  data () {
    return {
      item: ['张三','李四','小明']
    }
  },
  // 在组件中使用,去除组件中的template标签  (组件中的template标签中的内容编译时最终都会编译成render函数)
  // createElement参数配置请看vue官网 https://cn.vuejs.org/v2/guide/render-function.html
  /* 
    createElement();
    第一个参数（必要参数）：主要用于提供dom的html内容，类型可以是字符串、对象或函数
    第二个参数（类型是对象，可选）：用于设置这个dom的一些样式、属性、传的组件的参数、绑定事件之类
    第三个参数（类型是数组，数组元素类型是vnode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有vnode必须是唯一的
  */

  render: function (h) {
    console.log(h);
    // return createElement(
    //   "div",
    //   {},
    //   this.item.map(name => {
    //     return createElement('span', {
    //       class: 'box',
    //       on: {
    //         click: this.handlerClick
    //       }
    //     }, name);
    //   })
    // );


    // jsx写法
    return (
      <div class={'box'} onclick={this.handlerClick}>
        { this.item.map(name => { return <span>{ name }</span> }) }
      </div>
    )
  },
  methods: {
    handlerClick() {
      console.log('click');
    }
  }
};
</script>
<style scoped>
  .box {
    color: red;
    font-size: 50px;
    display: block;
  }
</style>

页面显示

createElement传入一个组件

<script>
import msg from "./components/msg.vue";
export default {
  render: function (h) {
    console.log(h);
    // createElement第一个参数也可以传入一个组件
    // return h(msg, {
    //   props: {
    //     msg1: 'css',
    //     msg2: 'html',
    //     msg3: 'javascript',
    //   },
    // });


    // jsx写法
    return (
      <msg msg1={'css'} msg2={'html'} msg3={'javascript'} />
    )
  },
};
</script>

<template>
  <ul>
    <li>{{ msg1 }}</li>
    <li>{{ msg2 }}</li>
    <li>{{ msg3 }}</li>
  </ul>
</template>
<script>
export default {
  props: {
    msg1: String,
    msg2: String,
    msg3: String,
  }
}
</script>
<style scoped>
  li {
    font-size: 50px;
    color: red;
  }
</style>

页面显示

render函数使用场景

<template>
  <div>
    <level :level="1">hello world1</level>
    <level :level="2">hello world2</level>
    <level :level="3">hello world3</level>
    <level :level="4">hello world4</level>
    <level :level="5">hello world5</level>
    <level :level="6">hello world6</level>
  </div>
</template>
<script>
import Level from './components/level.vue'
export default {
  components: {
    Level
  }
};
</script>
<style scoped>

</style>

<script>
export default {
  props: {
    level: Number
  },
  render: function (h) {
    console.log(h);
    console.log(this.$slots);
    // return createElement(`h${this.level}`, this.$slots.default, );

    // jsx写法
    const tag = `h${this.level}`;
    return (
      <tag>
        { this.$slots.default }
      </tag>
    )
  }
}
</script>

页面显示