Vue基础精讲 —— render function创建Vue组件（实例）

Vue一共有三种方式定义组件 template、 render、 jsx 

本节介绍用render function 来定义组件

import Vue from 'vue'

const component = {
  props: ['props1'],
  name: 'comp',
  // 同下：
  // template: `
  //   <div :style="style" @click="this.$emit('click')">
  //     <slot name="header"></slot>
  //     {
  {props1}}
  //   </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: