欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
龙口百度微信小程序_vue中render函数的使用详解
时间: 2021-01-08 11:58 浏览次数:
vue中render涵数的应用详细说明 本文关键详细介绍了vue中render涵数的应用详细说明,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看一下吧vue根据
vue中render函数的使用详解       这篇文章主要介绍了vue中render函数的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

render方法的实质就是生成template模板;

通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的;

通过这三个参数,可以生成一个完整的模板

官网实例

//未使用render函数
ponent('anchored-heading', {
 template: '#anchored-heading-template',
 pro凡科抠图: {
 level: {
 type: Number,
 required: true
//使用render函数
ponent('anchored-heading', {
 render: function (createElement) {
 return createElement(
 'h' + this.level, // tag name 标签名称
 this.$slots.default // 子组件中的阵列
 pro凡科抠图: {
 level: {
 type: Number,
 required: true

说明

区别:

没有显示的模板内容,而是通过render方法生成 使用了createElement方法

createElement方法,通过render函数的参数传递进来,有三个参数:

第一个参数(必要参数):主要用于提供DOM的html内容,类型可以是字符串、对象或函数 第二个参数(类型是对象,可选):用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类 第三个参数(类型是数组,数组元素类型是VNode,可选):主要是指该结点下还有其他结点,用于设置分发的内容,包括新增的其他组件。注意,组件树中的所有VNode必须是唯一的

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

在一次封装一套通用按钮组件的工作中,ess、error、warning、default)。首先,你可能会想到如下实现

 div v-if="type === 'success'" {{ text }} /div 
 div v-else-if="type === 'danger'" {{ text }} /div 
 div v-else-if="type === 'warning'" {{ text }} /div 

这样写在按钮样式少的时候完全没有问题,但是试想,如果需要的按钮样式有十多个。那么template写死的方式就显得很无力了。遇上类似这样的情况,使用render函数可以说最优选择了。

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

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

export default {
 pro凡科抠图: {
 type: {
 type: String,
 default: 'normal'
 text: {
 type: String,
 default: 'normal'
 computed: {
 tag() {
 switch (this.type) {
 case 'success':
 return 1;
 case 'danger':
 return 2;
 case 'warning':
 return 3;
 default:
 return 1;
 render(h) {
 return h('div', {
 class: {
 btn: true,
 'ess': this.type === 'success',
 'btn-danger': this.type === 'danger',
 'btn-warning': this.type === 'warning'
 domPro凡科抠图: {
 innerText: this.text
 on: {
 click: this.handleClick
 methods: {
 handleClick() {
 console.log('-----------------------');
 console.log('do something');

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

然后在父组件调用

 Button type="danger" text="test" /Button 

使用jsx

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

 render() {
 return (
 'ess': this.type === 'success',
 'btn-danger': this.type === 'danger',
 'btn-warning': this.type === 'warning'
 this.handleClick} 
 {this.text}
 /div 

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


下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园