vue函数式组件用法

vue文档链接 functional

函数式组件最大的特点就是没有this，但是可以通过context获取组件的属性来进行操作。

如以下是一个空白的组件，直接返回组件内插槽的内容

Vue.component('NullComponent', {
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    const { props, scopedSlots } = context
    return ScopedSlots.default()
  }
})

使用场景

// 引入校验函数
import { check } from "../util/auth"
Vue.component('NullComponent', {
  functional: true,
  props: {
    authority: {
        type: Array,
        required: true
    }
  },
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    const { props, scopedSlots } = context
    return check(props.authority) ? ScopedSlots.default() : null
  }
})