Vue.js中的功能组件是什么
小编给大家分享一下Vue.js中的功能组件是什么,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
Vue中的功能组件是一个采用渲染上下文并返回渲染HTML的组件,它没有实例。创建功能组件必须要使用functional: true属性以及渲染功能来创建对象
功能组件可允许以简洁的方式来通过传递上下文创建简单的组件,使它们变得非常简单而大受欢迎。
什么是功能组件
功能组件可以看作是与组件相关的功能,也就是说它是一个采用渲染上下文并返回渲染HTML的组件。它没有实例,因此也就没有this。
创建功能组件
要创建一个功能组件,必须要使用functional: true
属性以及渲染功能来创建对象。在下面的例子中将创建一个FunctionalButton组件的示例:
export default { functional: true, render(createElement, context) { return createElement('button', 'Click me'); }};
渲染上下文
context在render函数上看到的参数称为渲染上下文。它是一个包含以下属性的对象:
props:提供props 的对象
children :VNode 子节点的数组
slots:函数返回slot对象
parent:对父组件的引用
listeners:一个包含了组件上所注册的 v-on 侦听器的对象。这只是一个指向 data.on 的别名。
injections:如果使用了 inject 选项, 则该对象包含了应当被注入的属性。
data: 包含所有先前属性的对象
触发事件
由于功能组件没有实例,事件侦听器来自context.listeners属性上的父级,所以可用以下代码来实现click事件
例:假设有一个App.vue组件,可以在其中导入FunctionalButton.js以在其模板中使用它
<template> <FunctionalButton> Click me </FunctionalButton></template>
export default { functional: true, render(createElement, { props, listeners, children }) { return createElement( 'button', { attrs: props, on: { click: listeners.click } }, children ); }};
看完了这篇文章,相信你对Vue.js中的功能组件是什么有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!