vue render函数使用

render函数

1）组件的复用

先用vnode描述一个Dom结构

<div id='div1' class="header">
   <p style="font-size: 20px">vdom</p>
</div>

// vnode描述Dom结构
{
    tag: 'div',
    props:{ // 属性
        id: 'div1',
        className: 'header', 
    },children:[ 
         {
         tag:'p' // 标签节点
         props:{style:'font-size: 20px'} // 属性
            }
         children:'vdom'  // 文本
        ]
    
}

<template>
  <!-- rights组件 -->
  <div>
    <customData :level='1'>
       h1 123
    </customData>
    <customData :level='2'>
       h2 123
    </customData>
  </div>
</template>

<script type="text/ecmascript-6">
import customData from './mixin'
export default {
  data() {
    return {
      name: 'liu man'
    }
  },
  components: {
    customData
  }
}
</script>

export default {
  render: function(createElement) {
    return createElement(
      'h' + this.level,  // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props:{
    level: {
      type: Number,
      require: true
    },
  }
}

案例:

import Vue from 'vue'

const component = {
  props: ['props1'],
  name: 'comp',
  // template: `
  //   <div :style="style">
  //     <slot></slot>
  //   </div>
  // `,
  render (createElement) {
    return createElement('div', {
      style: this.style
      // on: {
      //   click: () => { this.$emit('click') }
      // }
    }, [
      this.$slots.header,
      this.props1
    ])
  },
  data () {
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa'
      },
      value: 'component value'
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  data () {
    return {
      value: '123'
    }
  },
  mounted () {
    console.log(this.$refs.comp.value, this.$refs.span)
  },
  methods: {
    handleClick () {
      console.log('clicked')
    }
  },
  // template: `
  //   <comp-one ref="comp">
  //     <span ref="span">{{value}}</span>
  //   </comp-one>
  // `,
  render (createElement) {
    return createElement(
      'comp-one',
      {
        ref: 'comp',
        props: {
          props1: this.value
        },
        // on: {
        //   click: this.handleClick
        // },
        nativeOn: {
          click: this.handleClick
        }
      },
      [
        createElement('span', {
          ref: 'span',
          slot: 'header',
          attrs: {
            id: 'test-id'
          }
        }, this.value)
      ]
    )
  }
})