先新建一個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>

之后 就可以呈現雙向綁定了

總結

以上是生活随笔為你收集整理的Vue中render函数的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。