Vue中的render渲染函数

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>

• 参考文档：
• seg入门:
• 官方文档
• api文档
• bable配置
• 脚本之家
• elementUI组件之render的应用