Vue中的render渲染函数

作者: 付出的前端路 | 来源:发表于2017-12-12 20:56 被阅读0次

Vue中的render渲染函数

render函数只支持jsx写法创建虚拟Dom节点。vue组件中的template解析顺序为template =>render =>javascriptDom节点

jsx语法 && babel写法

<template>
  <div>
    <blog-post>
    </blog-post>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        blogTitle: '测试'
      }
    },
    components: {
      // blog-post
      'blog-post':{
        render: (h)=>{
          // babel转化器写法， 将html转换为jsx语法,需要安装相关jsx依赖
          // return <div id="foo">bar</div>
          // Jsx写法， 基于jsx语法
          return h('h1',[
            // 创建子节点
            h('a', {
              // 添加html属性
              attrs: {
              name: 'a',
              href: '#a'
            }
            }, '你好')
          ])
        }
      }
    }
  }
</script>

<style>
</style>