Vue中render函数的使用

先新建一个renderDom.js的文件  下面是这个文件的内容

export default {
  render: function (createElement) {
    return createElement('h3', '我是H3标签')
  }
}

之后作为组件引入到vue单文件中

<template>
  <div>
    <render-fun/>
  </div>
</template>

<script>
import renderFun from './render.js'
export default {
  components: {
    'render-fun': renderFun
  }
}</script>

上面是基础用法

如果需要传参 和组件传参一样 在render.js中用props

render函数作用是创造一个虚拟的dom节点 （实质就是生成template模板）
之后通过js挂载到body中 和react类似直接用js生成dom节点

render函数不支持在生成的模板中使用v-if
如果需要按使用 那就用原生js来判断 if(){ h('p','为真')} else{h('p','为假')} 来使用哪个render

添加更多属性值

render: function (createElement) {
    return createElement(
      'h3',
      {
        // DOM 属性（这里选择innerHtml进行赋值）  如果是input 则用value 进行赋值 而不是innerlHTML      
        domProps: {
          innerHTML: '我是H3标签'
        },
        // 添加class（接受一个字符串、对象或字符串和对象组成的数组）
        'class': {
          'testClass': true
        },
        // 添加行内样式（接受一个字符串、对象，或对象组成的数组）
        style: {
          color: 'red'
        },
        // 添加id      
        attrs: {
          id: 'foo'
        },
        // 事件监听器在 `on` 属性内，
        // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
        // 需要在处理函数中手动检查 keyCode。        
 　　　　on: {
          click: this.clickHandler
        }
      }
    )
  },
  methods: {
    clickHandler () {
      alert('on被弹出')
    }
  }
}

增加子元素

render: function (h) { // 形参 createElement 可简写成 h
    return h(
      'h3',
      {
        // 添加class（接受一个字符串、对象或字符串和对象组成的数组）
        'class': {
          'testClass': true
        },
        // 添加行内样式（接受一个字符串、对象，或对象组成的数组）
        style: {
          color: 'red'
        },
        // 添加id        
    　　attrs: {
          id: 'foo'
        },
        // 事件监听器在 `on` 属性内，
        // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
        // 需要在处理函数中手动检查 keyCode。        
    　　on: {
          click: this.clickHandler
        }
      },
      [
        h('p', {
          // 这个属性如果放在上面的div父元素中  则会覆盖掉下面子元素的值  如果是input 改变值 则需要value 而不是下面的 innerHTML      
  　　　　domProps: {
            innerHTML: '我是p标签'
          }
        })
      ]
    )
  },
  methods: {
    clickHandler () {
      alert('on被弹出')
    }
  }    

循环遍历Array 可渲染多个dom

export default {
  data () {
    return {
      arr: [1, 2, 3, 4]
    }
  },
  render: function (h) {
    return h(
      'ul',
      this.arr.map(item => h('li', item))
    )
  }
}

使用v-model

export default {
  props: ['propsValue'],
  render: function (h) {
    let self = this
    return h(
      'input',
      {
        domProps: {
          value: self.propsValue
        },
        on: {
          'input': function (event) {
          // 如果是写在template 模板click事件就是直接@click.stop
          // 使用render动态生成 就需要 原生事件 阻止冒泡 
         // event.stopPropgation() 
         // event.stopPrevent()

            self.$emit('input', event.target.value)
          }
        }
      }
    )
  }
}    

在父组件中 引入之后 即可使用

 <render-fun v-model='propsValue' />
 <div>{{propsValue}}</div>

之后 就可以呈现双向绑定了

 当然你也可以直接写元素返回

export default {
  methods: {
    testFun() {
      return "直接写标签";
    },
  },
  render(createElement) {
    return <div>{this.testFun()}</div>;
    // return createElement("h3", {
    //   domProps: {
    //     innerHTML: "我是H3标签",
    //   },
    // });
  },
};