render函数动态创建dom，并和创建的子组件进行传值交互

1. render函数语法及基本用法

render函数创建dom元素，的一般格式为：

render: function (createElement) {
   return createElement('div', {}, [])
}
//createElement('', {}, [])有三个参数
/**
第一个参数可以为HTML标签名，如'div'  或者为封装的一个组件名（如组件名为querySelect，第一个参数就为querySelect
**/
/**
第二个参数为第一个参数所创建的模板的属性对象，编写格式为
{
	style：{
		width: '80px', marginLeft: '20px'
	}，
	//给创建的组件定义名称
	ref：'dom',
	//给创建的组件定义方法
	on: {
		receiveData: (value) => {
            data.ralation = value
        }
	}
}
**/
/**
第三个参数可以子虚拟节点为一个数组，如第一个节点为一个盒子'div',在该div下创建三个button就可以这么写如下
**/
render: function (createElement) {
   return createElement('div', {}, [
   	createElement('Button', {}, []), 
   	//同样第二个参数{}定义button的各种属性，可以不写，就是不定义属性，第三个参数[],数组可以
   	//不写，表示在此button模板下不定义子模板
   	createElement('Button', {}, []),
   	createElement('Button', {}, [])
   ])
}
//在vue项目中，h函数就是createElement方法，这个函数的作用就是用来创建虚拟dom的，所以上述代码也可以写成
render: function (h) {
            return h('div', {}, [])
        }

2. h函数第一个参数为自己封装的组件，并且从自己封装好的组件中向h函数创建的虚拟Dom中传值。
   自己封装了一个querySelect.vue组件如下：

/**该组件是一个两个选项框和两个输入框**/
<template>
  <div>
      <Select v-model="item" style="width:100px;marginleft:80px">
          <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Select v-model="operate" style="width:100px;marginleft:8px">
          <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Input v-model="value1" placeholder="Enter something..." style="width: 100px" />
      <Input v-model="value2" placeholder="Enter something..." style="width: 100px" />
  </div>
</template>
<script>
export default {
  name: 'querySelect',
  data () {
    return {
      cityList1: [
        {
          id: '1-1',
          tableName: 'project',
          value: 'New York',
          label: 'New York',
          type: String
        },
        {
          id: '1-2',
          tableName: 'project',
          value: 'London',
          label: 'London',
          type: String
        },
        {
          id: '1-3',
          tableName: 'project',
          value: '数量',
          label: '数量',
          type: Number
        },
        {
          id: '1-4',
          tableName: 'project',
          value: '范围',
          label: '范围',
          type: Number
        }
      ],
      cityList2: [
        {
          value: '大于',
          label: '大于'
        },
        {
          value: '小于',
          label: '小于'
        },
        {
          value: '等于',
          label: '等于'
        }
      ],
      item: '',
      operate: '',
      value1: '',
      value2: ''
    }
  },
  methods: {
    transData () {
      this.$emit('receiveData', this.item, this.operate, this.value1, this.value2)
    }
  },
  watch: {
    item: function () {
      this.transData()
    },
    operate: function () {
      this.transData()
    },
    value1: function () {
      this.transData()
    },
    value2: function () {
      this.transData()
    }
  },
  mounted () {
  },
  updated () {
  }
}
</script>

下面是在另一个组件中随机创建querySelect.vue这个组件，并且接收querySelect.vue这个组件的传过来的四个变量：item、operate、value1、value2。
在h函数中创建querySelect组件，该组件就相当于这个组件的子组件，采用通过在on属性里面定义方法来接收，来自子组件querySelect传递的变量。并将该变量赋值给data对象的item、operate、content1、content2属性：

h('span', [
          h(querySelect, {
            style: {
              width: '80px', marginLeft: '20px'
            },
            ref: 'dom' + node.nodeKey,
            on: {
              receiveData: (item, operate, value1, value2) => {
                data.item = item
                data.operate = operate
                data.content1 = value1
                data.content2 = value2
                console.log(node, '有数据的node')
              }
            }
          }),

动态创建dom的时候一般会用到，render函数，通过render函数创建虚拟dom。比如实现如下的效果：