vue中的功能组件是一个采用渲染上下文并返回渲染html的组件，它没有实例。创建功能组件必须要使用functional: true属性以及渲染功能来创建对象
功能组件可允许以简洁的方式来通过传递上下文创建简单的组件，使它们变得非常简单而大受欢迎，接下来将要在文章中分享的是Vue.js中的功能组件，具有一定的参考价值，希望对大家有所帮助。
【推荐课程：Vue.js教程】
什么是功能组件
立即学习“前端免费学习笔记（深入）”；
功能组件可以看作是与组件相关的功能，也就是说它是一个采用渲染上下文并返回渲染HTML的组件。它没有实例，因此也就没有this。
创建功能组件
要创建一个功能组件，必须要使用functional: true属性以及渲染功能来创建对象。在下面的例子中将创建一个FunctionalButton组件的示例：
export default {
functional: true,
render(createElement, context) {
return createElement('button', 'Click me');
}};渲染上下文
context在render函数上看到的参数称为渲染上下文。它是一个包含以下属性的对象：
props：提供props 的对象
睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产
children ：VNode 子节点的数组
slots：函数返回slot对象
parent：对父组件的引用
listeners：一个包含了组件上所注册的 v-on 侦听器的对象。这只是一个指向 data.on 的别名。
injections：如果使用了 inject 选项, 则该对象包含了应当被注入的属性。
data: 包含所有先前属性的对象
触发事件
由于功能组件没有实例，事件侦听器来自context.listeners属性上的父级，所以可用以下代码来实现click事件
例：假设有一个App.vue组件，可以在其中导入FunctionalButton.js以在其模板中使用它
Click me
export default {
functional: true,
render(createElement, { props, listeners, children }) {
return createElement(
'button',
{
attrs: props,
on: {
click: listeners.click
}
},
children
);
}};总结：以上就是本篇文章的全部内容了，希望对大家有所帮助。
