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
}
})
