Vue2中如何使用函数式组件
使用场景
Vue
推荐在绝大多数情况下使用 template
来创建你的HTML。但是现实的业务场景中经常会遇到根据用户权限判断,显示不同的按钮。
接下来我们由浅入深,通过两个例子来了解。首先了解什么是函数式组件。
什么是函数式组件
函数式组件在 React
中非常流行,那在 Vue
中我们也可以玩得很 6 吗?
通过官方文档了解到 函数式组件 属于渲染函数能够使用 JavaScript 的完全编程的能力。没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法。它只是接受一些 prop 的函数。
我们可以把函数式组件想象成组件里的一个函数,入参是 渲染 上下文 (render context),返回值是渲染好的HTML
Stateless无状态:组件自身没有状态
Instanceless无实例:组件自身没有实例,也就是没有this
如何创建一个函数式组件
首先将组件标记为 functional
,这意味它无状态、无实例。一个函数式组件就像这样:
Vue.component('my-component',{
functional : true,
render : function(createElement , context){
//...
}
})
context
中包含以下字段的对象:
props
:提供所有 prop 的对象children
:VNode子节点的数组slots
:一个函数,返回了包含所有插槽的对象scopedSlots
:(2.6.0+)一个暴露传入的作用域槽的对象。也以函数形式暴露普通插槽。data
:传递给组件的整个数据对象,作为createElement
的第二个参数传入组件parent
:对父组件的引用listeners
:(2.3.0+)一个包含了所有父组件为当前组件注册的事件监听器的对象。这是data.on
的一个别名injuctions
:(2.3.0+)如果使用了inject
选项,则该对象包含了应当被注入的 property。
为什么使用函数式组件
第一,因为函数式组件只是函数,渲染开销会低很多。
第二,更灵活,它能根据传入 prop 的值来代为渲染更具体的组件。
简单的例子
假若我们封装一套按钮组件,通过后台返回的type进行渲染,首先可能想到的是 v-if
实现
<div v-if