render函数

本文介绍了Vue中自定义组件和函数式组件的render函数使用,强调了props的规范书写以及如何避免eslint错误。在自定义组件中,render函数带有this变量,而函数式组件则通过ctx来传递上下文。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这是根据传入的参数来判断应该渲染的图标,注意,不论在哪里,props中的属性都因该规范书写,至少提供默认值和类型,eslint检查就不会报缺少默认值的错误了。


import Vue from 'vue'
Vue.component('render-dom', {
  props: {
    row: {
      type: Object,
      default: function() {
        return {}
      }
    },
    render: {
      type: Object,
      default: function() {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    },
    column: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  methods: {
    handleClick(ev) {
      ev.stopPropagation()
      alert('hah')
    }
  },
  render: function(h) {
    const { safeRate, trend } = this.row
    var { type, renderValue, renderOptions } = { ...this.render }

    var icon = ''
    if (safeRate > 0 && safeRate <= 30) {
      // todo 红色
      renderOptions.type = 'danger'
      if (trend !== '') {
        if (trend === 'up') {
          icon = 'dangerup'
        } else {
          icon = 'dangerdown'
        }
      } else {
        icon = ''
      }
    } else if (safeRate > 30 && safeRate <= 50) {
      // todo yellow
      renderOptions.type = 'warning'
      if (trend !== '') {
        if (trend === 'up') {
          icon = 'warnup'
        } else {
          icon = 'warndown'
        }
      } else {
        icon = ''
      }
    } else {
      // todo green
      renderOptions.type = 'success'
      if (trend !== '') {
        if (trend === 'up') {
          icon = 'up'
        } else {
          icon = 'down'
        }
      } else {
        icon = ''
      }
    }
    return h(type, {
      attrs: {
        ...renderOptions,
        icon: icon
      },
      props: {
      },
      domProps: {
        // innerHTML: `<span class="${renderOptions.icon}">${this.row[renderValue]}</span>`
      }
    }, this.row[renderValue] + '%')
  }

})

如果想让某一段代码不被eslint检查,那么可以用 /* eslint-disable */ 将需要避免被检查的代码包裹起来。

/* eslint-disable */ 
  there is some segment witch need avoid be check by eslint
/* eslint-disable */ 

这是Vue中自定义组件的写法,自定义组件中可根据需要写render,函数,这里面的是有this 变量的,而函数式组件没有this变量,相反的,Vue提供了ctx来填补这个缺口。


render: function( h, row, index ) {
  return h(
    "el-button",
    {
      'class': {

      },
      attrs: {
        type: "success",
        icon: 'el-icon-top',
        size: 'mini'
      },
      props: {
        icon: 'el-icon-search'
      },
      style: {
        icon: 'el-icon-search'
      },
      domProps: {
        innerHTML: 'baz'
      },
      on: {
        click: this.handleClick
      },
      nativeOn: {
        click: this.handleClick
      }
    },
    [
      row.profession,
      h('span', {

      },' el-icon-search')
    ]
  );
}



这是函数式组件的写法,里面只有这几个元素,不含有methods属性,render函数第二个参数ctx可以有很多属性,在vue官方文档有详细说明 去到这里

export default {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  render: function (h, ctx) {
    const params = {
      row: ctx.props.row,
      index: ctx.props.index
    }
    if (ctx.props.column) params.column = ctx.props.column
    return ctx.props.render(h, params.row, params.index)
  },
  // methods: {a
  //   handleClick() {
  //     alert('hah')
  //   }
  // }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值