render函数

最新推荐文章于 2023-10-30 11:30:20 发布

**无敌小飞侠

最新推荐文章于 2023-10-30 11:30:20 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qinwei_123/article/details/95599093

js 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了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')
  //   }
  // }
}