Vue的render怎么配置，一文说明白

写这篇文章的初衷是想要在render里面使用自定义的指令，如clockoutside，过程真不容易，所以记下来，方便有缘人翻阅。

render其实就是通过createElement来创建dom节点的，Vue把这个方法封装成了一个h函数，下面详细讲解h函数怎么使用

* h函数的用法 h(component, config, text)

其中component是组件，config是配置，text是文本内容

* config都有什么配置

* attrs  -  `Object 键值对的形式` 配置原生的attribute，可以穿透组件，即A组件传递的属性可以直接作用在C组件上，子孙间传递，不用经过B组件传递
* props  -  `Object 键值对的形式` 配置组件的props属性，不能穿透组件，只能由A组件传递到B组件，父子间传递
* on  -  `Object 键值对的形式` 组件事件，通过emit发起的事件
* nativeOn - `Object 键值对的形式` js的原生事件，包括mousemove,mouseon等
* directives - `Array 数组对象的形式` 配置自定义指令，Object里面name属性配置指令名称，value属性配置指令的调用方法

* 代码如下

import clickoutside from 'element-ui/src/utils/clickoutside';  // 引入指令
directives: { clickoutside },  // 局部注册指令
 render: (h)=>{
     return h(
        "el-popconfirm", {
          attrs: {   //HTML attribute
            ref: 'popconfirm',
            disabled: disabled,
            icon: 'el-icon-xxx',
            placement: "top",
            title:"你确定要删除这行内容吗？",
          },
          props: {  // 组件的props属性
            
          },
          on: {   // 组件的事件写这里,包括v-xx和$emit事件
            confirm: () => {
              console.log("确认")
            },
          },
          nativeOn: {  // js原生事件写这里
            mouseon: (e)=>{
              console.log(e);
            },
          },
          directives: [  // 自定义指令写在这里
            {
              name: 'clickoutside',   // 指令名称
              value: this.handleClose  // 指令方法
            }
          ]
        },
         '删除' 
      );
      handleClose(){
      console.log(this.$refs);
      if(this.$refs.popconfirm){
        this.$refs.popconfirm.visible=false
      }
    },
  }