Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。 在 HTML 层， 我们决定这样定义组件接口：通过传入不同的level 1-6 生成h1-h6标签，和使用slot生成内容

<div id="div1">
  <child :level="1">Hello world!</child>
</div>
<script type="text/x-template" id="child-template">
 <h1 v-if="level === 1">
  <slot></slot>
 </h1>
 <h2 v-if="level === 2">
  <slot></slot>
 </h2>
 <h3 v-if="level === 3">
  <slot></slot>
 </h3>
 <h4 v-if="level === 4">
  <slot></slot>
 </h4>
 <h5 v-if="level === 5">
  <slot></slot>
 </h5>
 <h6 v-if="level === 6">
  <slot></slot>
 </h6>
 </script>

<script type="text/javascript">
  /**
   * 全局注册child组件，注意template如果值以 # 开始，则它用作选项符，将使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板,这样的好处是html不会渲染里面的内容
   * 这里使用template不是最好的选择，
   * 一、代码冗长 
   * 二、在不同的标题插入内容需要重复使用slot 
   * 三、由于组件必须有根元素，所以标题和内容被包裹在一个无用的div中，比如<div><h1>hello world</h1></div>
   */

  Vue.component('child', {
   template: '#child-template',
   props: {
    level: {
     type: Number,
     required: true
    }
   },
   data: function() {
    return {
     a: 1
    }
   }
  })

  new Vue({
    el:"#div1"
  })
 </script>

我们尝试使用render函数实现上面的例子,注意使用render函数，template 选项将被忽略。 createElement接收3个参数：

第一个参数可以是HTML标签名，组件或者函数都可以；此参数是必须的；

第二个为数据对象{Object}（可选）；

第三个为子节点{String | Array}（可选）,多个子节点[createElement(tag1),createElement(tag2)]。

<div id="div1">
  <child :level="1">
   Hello world!
  </child>
  <child :level="2">
   <!-- 将不会被显示 -->
   <span slot="footer">span</span>
   <p slot="header">header slot<span>span</span></p>
  </child>
 </div>

Vue.component('child', {
   render: function(createElement) {
    console.log(this.$slots);
    return createElement(
     'h'+ this.level, // tagName标签名称
     {
      // 为每个h标签设置class
      'class': {
       foo: true,
       bar: false
      },
      // 最终被渲染为内联样式
      style: {
       color: 'red',
       fontSize: '14px'
      },
      // 其他的html属性
      attrs: {
       id: 'foo',
       'data-id': 'bar'
      },
      // DOM属性
      domProps: {
       // innerHTML: 'from domProps',
      },
      // 事件监听器基于 "on"
      // 所以不再支持如 v-on:keyup.enter 修饰器
      on: {
       click: this.clickHandler
      },
      // ...
     },
     // 你可以从this.$slots获取VNodes列表中的静态内容
     // $slots.default用来访问组件的不具名slot
     // 当你可能需要具名slot的时候需要指定slot的name, this.$slots.header
     [this.$slots.default]
    )
   },
   template: '<div v-if="level===1"><slot></slot></div>', // 将被忽略
   props: {
    level: {
     type: Number,
     required: true
    }
   },
   methods: {
    clickHandler: function() {
     console.log('clickHandler')
    }
   }
  })

  new Vue({
    el:"#div1"
  })

我们现在可以完成这样的组件

<h1>
   <a name="hello-world" href="#hello-world" rel="external nofollow" >
    Hello world!
   </a>
</h1>

// 递归函数获得helloworld文本
  function getChildrenTextContent(child) {
    return child.map(function(node) {
      return node.children? getChildrenTextContent(node.children) : node.text
    }).join('')
  }
  Vue.component('child',{
    render: function(createElement) {
      var hello_world = getChildrenTextContent(this.$slots.default)
               .toLowerCase()
               .replace(/\W+/g,'-')
               .replace(/^\-|\-$/g,'');
      return createElement(
        'h'+ this.level,
        {},
        [ // 创建一个a标签，设置属性，并设置a标签的子节点
          createElement('a',{
            attrs: {
              name: hello_world,
              href: '#' + hello_world
            }
          },this.$slots.default)
        ]
      )
    },
    props: {
      level: {
        type: Number,
        required: true
      }
    }
  })
  new Vue({
    el:"#div1"
  })

注意VNode的唯一性,这里两个VNode指向同一引用是错误的，如果要重复创建多个相同元素/组件，可以使用工厂函数实现

<div id="div1">
  <child :level="1">
   Hello world!
  </child>
</div>

Vue.component('child',{
  // render: function(createElement) {
  // var myParagraphVNode = createElement('p','hello')
  // return createElement('div',
  //   [myParagraphVNode, myParagraphVNode]
  // )
  // },
  render: function(createElement) {
    return createElement('div',
      Array.apply(null, {length:20}).map(function() {
        return createElement('p','hello')
      })
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
new Vue({
  el:"#div1"
})

使用javascript代替模板功能，某些api要自己实现

①使用if/else代替v-if

②使用map代替v-for

Vue.component('child',{
  render: function(createElement) {
    if (this.lists.length) {
      return createElement('ul',this.lists.map(function() {
        return createElement('li','hi')
      }))
    } else {
      return createElement('p','no lists')
    }
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  data: function() {
    return {
      lists: [1,2,3]
    }
  }
})

// render函数中没有与v-model相应的api - 你必须自己来实现相应的逻辑:
Vue.component('child-msg',{
  render: function(createElement) {
    var self = this;
    return createElement('div', [
        createElement('input',{
          'on': {
            input: function(event) {
              self.value = event.target.value;
            }
          }
        }),createElement('p',self.value)
      ])
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  data: function() {
    return {
      value: ''
    }
  }
})
new Vue({
  el:"#div1"
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue  # render函数  # render  # vue中render函数的使用详解  # Vue中render函数的使用方法  # 如何理解Vue的render函数的具体用法  # 浅谈Vue render函数在ElementUi中的应用  # 深入理解vue Render函数  # VUE render函数使用和详解  # 简单谈一谈Vue中render函数  # 多个  # 将被  # 可选  # 递归  # 你可以  # 第一个  # 最好的  # 这就是  # 当你  # 其他的  # 你真  # 第二个  # 可以使用  # 我们现在  # 第三个  # 你必须  # 来实现  # 创建一个  # 大家多多  # 更接近 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何在云虚拟主机上快速搭建个人网站？  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  使用C语言编写圣诞表白程序  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  佛山网站制作系统,佛山企业变更地址网上办理步骤？  Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】  如何自定义建站之星网站的导航菜单样式？  Laravel怎么实现模型属性的自动加密  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  大连网站制作公司哪家好一点,大连买房网站哪个好？  Python3.6正式版新特性预览  PHP 500报错的快速解决方法  html5的keygen标签为什么废弃_替代方案说明【解答】  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  如何用AWS免费套餐快速搭建高效网站？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  教学论文网站制作软件有哪些,写论文用什么软件 ？  网站制作软件免费下载安装,有哪些免费下载的软件网站？  Python高阶函数应用_函数作为参数说明【指导】  laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法  如何在香港服务器上快速搭建免备案网站？  JavaScript如何实现继承_有哪些常用方法  如何生成腾讯云建站专用兑换码？  Laravel如何与Docker（Sail）协同开发？（环境搭建教程）  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  如何在阿里云完成域名注册与建站？  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  PythonWeb开发入门教程_Flask快速构建Web应用  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  微信小程序 配置文件详细介绍  实例解析angularjs的filter过滤器  零服务器AI建站解决方案：快速部署与云端平台低成本实践  javascript中对象的定义、使用以及对象和原型链操作小结  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  WEB开发之注册页面验证码倒计时代码的实现  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  JavaScript常见的五种数组去重的方式  活动邀请函制作网站有哪些,活动邀请函文案？  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  IOS倒计时设置UIButton标题title的抖动问题  安克发布新款氮化镓充电宝：体积缩小 30%，支持 200W 输出  魔方云NAT建站如何实现端口转发？  JavaScript模板引擎Template.js使用详解  制作电商网页,电商供应链怎么做？