Vue中render函数基本用法（详细教程）-js教程-PHP中文网

首页

web前端

js教程

Vue中render函数基本用法（详细教程）

亚连

Jun 08, 2018 pm 04:03 PM

render函数 vue

本篇文章主要介绍了Vue中render函数的使用方法，现在分享给大家，也给大家做个参考。

render函数

vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。

什么情况下适合使用render函数

在一次封装一套通用按钮组件的工作中，按钮有四个样式(default success error )。首先，你可能会想到如下实现

 <p v-if="type === &#39;success&#39;">success</p>
 <p v-else-if="type === &#39;error&#39;">error</p>
 <p v-else-if="type === &#39;warm&#39;">warm</p>
 <p v-else>default</p>

登录后复制

这样写在按钮样式少的时候完全没有问题，但是试想，如果需要的按钮样式有十多个，按钮内的文字根据实际情况而定(如success按钮内的文字可能是OK、GOOD等等)。那么template写死的方式就显得很无力了。遇上类似这样的情况，使用render函数可以说最优选择了。

根据实际情况改写按钮组件

首先render函数生成的内容相当于template的内容，故使用render函数时，在.vue文件中需要先把template标签去掉。只保留逻辑层。

export default {
 render(h) {
  return h(&#39;p&#39;,{
   &#39;class&#39;: {
    btn: true,
    success: this.type === &#39;success&#39;,
    error: this.type === &#39;error&#39;,
    warm: this.type === &#39;warm&#39;,
    default: this.type === &#39;default&#39;
   },
   domProps: {
    innerHTML: this.$slots.default[0].text
   },
   on: {
    click: this.clickHandle
   }
  })
 },
 methods: {
  clickHandle() {
   // dosomething
  }
 },
 props: {
  type: {
   type: String,
   default: &#39;default&#39;
  },
  text: {
   type: String,
   default: &#39;default&#39;
  }
 }
};

登录后复制

根据组件化思维，能抽象出来的东西绝不写死在逻辑上。这里的clickHandle函数可以根据按钮的type类型触发不同的逻辑，就不多叙述了。

然后在父组件调用

<btn
 v-for="(btn, index) in testData"
 :type="btn.type"
 :text="btn.text"
 :key="index">{{btn.text}}
</btn>

登录后复制

使用jsx

是的，要记住每个参数的类型同用法，按序传参实在是太麻烦了。那么其实可以用jsx来优化这个繁琐的过程。

return (
 <p
  class={{
   btn: true,
   success: this.type === &#39;success&#39;,
   error: this.type === &#39;error&#39;,
   warm: this.type === &#39;warm&#39;,
   default: this.type === &#39;default&#39;
  }}
  onClick={this.clickHandle}>
  {this.$slots.default[0].text}
 </p>
)

登录后复制

示例二：

在遇到写类似的组件的时候需要写很多很长的代码，出于简洁（懒惰使人进步）的角度来说，我们应该找到更合适的方法来实现该效果。

 <body> 
    <p id="app"> 
      <mycomment :level="2"> 
        这是h2元素 
      </mycomment> 
    </p> 
  </body> 
  <script type="text/x-template" id="is"> 
 <p> 
  <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> 
 </p> 
</script> 
  <script> 
    Vue.component(&#39;mycomment&#39;,{ 
      template:&#39;#is&#39;, 
      props:{ 
        level:{ 
          type:Number, 
          required:true, 
        } 
      } 
    }) 
    var app =new Vue({ 
      el:&#39;#app&#39;, 
    }) 
   </script>

登录后复制

这时候Render 函数就很好的解决了这个问题，先来简单一点额例子，算是有基本的骨架了

 <body> 
  <p id="app"> 
    <render-teample :level="4"> 
      render function 
 
    </render-teample> 
  </p> 
 
</body> 
<script> 
Vue.component(&#39;render-teample&#39;,{ 
  render:function(createElement){ 
    return createElement( 
      &#39;h&#39;+this.level, 
      this.$slots.default 
      ) 
  }, 
   props: { 
  level: { 
   type: Number, 
   required: true 
  } 
} 
  var app=new Vue({ 
    el:"#app", 
 
  }); 
 </script>

登录后复制

然后进一步给你的组件加入你想要的样式需要事件，变得有血有肉

 <body> 
    <p id="app"> 
      <render-teample :level="4" > 
 
        <p class="jah" slot="myslot">render function</p> 
      </render-teample> 
    </p> 
 
  </body> 
  <script> 
  Vue.component(&#39;render-teample&#39;,{ 
    render:function(createElement){ 
      return createElement( 
        &#39;h&#39;+this.level, 
        { 
          &#39;class&#39;:{ 
            show:true, 
            hide:false, 
          }, 
          style:{ 
            width:&#39;200px&#39;, 
            height:&#39;400px&#39;, 
            background:&#39;red&#39;, 
          }, 
          attrs:{ 
            name:&#39;h-ex&#39;, 
            id:&#39;h-id&#39; 
          }, 
          props:{ 
            myprops:true, 
          }, 
           on: { 
          click: function(event){ 
            alert(this.num) 
          } 
        }, 
          nativeOn:{ 
            click:function(event) { 
 
              alert(1111) 
            } 
          } 
 
        }, 
        [ 
          this.$slots.myslot, 
          createElement(&#39;p&#39;,{ 
             domProps:{ 
            innerHTML:&#39;holle render&#39; 
          } 
          }) 
        ] 
 
        ) 
    }, 
     props: { 
    level: { 
     type: Number, 
     required: true 
    } 
  } 
});  
    var app=new Vue({ 
      el:"#app", 
      data:{ 
        num:110 
      } 
    }); 
  </script>

登录后复制

注意：约束组件中 VNodes 必须是唯一的。

直接把所有元素写在一个createElement()下是很痛苦的，不利于维护。

所以通常会

var com1= createElement(&#39;p&#39;,&#39;item1&#39;);var
com2= createElement(&#39;p&#39;,&#39;item1&#39;);

登录后复制

可以使用return createElement('p',[com1,com2])

这种情况是禁止的return createElement('p',[com1,com1])

上面是我整理给大家的，希望今后会对大家有帮助。

在Node.js中如何实现mysql事务自动回收连接

在JS数组中如何删除某个元素

详细介绍js中有关promise的知识点

以上是Vue中render函数基本用法（详细教程）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7328

Java教程

1626

CakePHP 教程

1350

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

vue中echarts怎么用 May 09, 2024 pm 04:24 PM

在 Vue 中使用 ECharts 可让应用程序轻松添加数据可视化功能。具体步骤包括：安装 ECharts 和 Vue ECharts 包、引入 ECharts、创建图表组件、配置选项、使用图表组件、实现图表与 Vue 数据的响应式、添加交互式功能，以及使用高级用法。

vue中的export default的作用 May 09, 2024 pm 06:48 PM

问题：Vue 中 export default 的作用是什么？详细描述：export default 定义组件的默认导出。导入时，将自动导入组件。简化导入过程，提高清晰度和防止冲突。常用于导出单个组件、同时使用命名导出和默认导出以及注册全局组件。

vue中map函数的用法 May 09, 2024 pm 06:54 PM

Vue.js map 函数是一个内置的高阶函数，用于创建一个新数组，其中每个元素都是原始数组中的每个元素转换后的结果。其语法为 map(callbackFn)，其中 callbackFn 接收数组中的每个元素作为第一个参数，可选地接收索引作为第二个参数，并返回一个值。map 函数不会改变原始数组。

vue中event和$event区别 May 08, 2024 pm 04:42 PM

Vue.js 中，event 为原生 JavaScript 事件，由浏览器触发，而 $event 是 Vue 特定抽象事件对象，在 Vue 组件中使用。一般使用 $event 更方便，因为它经过格式化和增强，支持数据绑定。当需要访问原生事件对象特定功能时，使用 event。

vue中onmounted作用 May 09, 2024 pm 02:51 PM

onMounted 是 Vue 中的组件挂载生命周期钩子，其作用是在组件挂载到 DOM 后执行初始化操作，例如获取 DOM 元素的引用、设置数据、发送 HTTP 请求、注册事件监听器等。它在组件挂载时仅调用一次，如果需要在组件更新后或销毁前执行操作，可以使用其他生命周期钩子。

vue中export与export default区别 May 08, 2024 pm 05:27 PM

Vue.js 中导出模块的方式有两种：export 和 export default。export用于导出命名实体，需要使用花括号；export default用于导出默认实体，不需要花括号。导入时，export导出的实体需要使用其名称，而export default导出的实体可以隐式使用。建议对于需要被多次导入的模块使用export default，对于只导出一次的模块使用export。

vue中的钩子是什么 May 09, 2024 pm 06:33 PM

Vue 钩子是可在特定事件或生命周期阶段执行操作的回调函数。它们包括生命周期钩子（如 beforeCreate、mounted、beforeDestroy）、事件处理钩子（如 click、input、keydown）和自定义钩子。钩子增强组件控制，响应组件生命周期，处理用户交互并提高组件重用性。使用钩子，定义钩子函数、执行逻辑并返回可选值即可。