vue函数式组件特点:
- 组件没有管理任何状态,无data
- 没有监听任何传递给它的状态,只会接收一些传入的props值
- 组件没有实例,无this
- 组件没有生命周期
- 不能通过$emit 对外暴露事件,调用事件只能通过context.listeners.click的方式调用外部传入的事件
优点就是灵活,轻量,渲染开销低,因为函数式组件只是函数
vue函数式组件应用:
函数式组件需要设置 functional:true,并自定义一个render函数,render函数接收两个参数如下:
- createElement:等于全局的createElement函数,用于创建VNode
- context:一个对象,组件需要的一切都是通过context参数传递
context属性如下: - parent:父组件的引用
- props:传入的所有prop的对象
- children:VNode 子节点的数组
- slots:一个函数,包含所有插槽的对象
- scopedSlots:暴露传入的作用域插槽的对象,也以函数形式暴露普通插槽
- data:传递给组件的整个数据对象,作为 createElement 的第二个参数传入组件
- listeners:组件的自定义事件
- injections:如果使用了 inject 选项,则该对象包含了应当被注入的属性
一个按钮组件案例
export default {
functional: true, //指定这是一个函数式组件
render(createElement, { props, listeners, children }) {
return createElement(
'button',
{
attrs: props,
on: {
click: listeners.click
}
},
children
);
}
};
函数式组件的适用场景
只需要将外部传入的数据进行展现,不需要有内部状态,不需要在生命周期钩子函数里面做处理,这时候你就可以考虑使用函数式组件。
例如:
- 作为展示组件,例如button组件,静态文本组件,列表的选项
- 用于封装组件,接收一个组件返回一个增加或减少样式效果的封装组件