在Vue.js中有几种方式来渲染功能组件,根据使用情况和您自己的口味,您可能更喜欢其中一个,这是一个很好的框架,您可以根据您的偏好进行调整。
在 Vue.js 中的功能组件中,您已经看到如何使用渲染函数创建 FunctionalButton 组件。
让我们看看你有哪些其他选项,以FunctionalButton为例,请记住,在帽子下,它们都编译成渲染函数。
寺庙
此选项自 Vue 版本 2.5.0 以来就可用,并且可能是最受欢迎的选项之一,因为模板是 Vue 中的默认方式,所以您可能已经熟悉了。
让我们创建一个 FunctionalButtonTemplate.vue 文件,其中包含以下内容:
1[label FunctionalButtonTemplate.vue]
2<template functional>
3 <button :disabled="props.disabled" @click="listeners.click">
4 <slot />
5 </button>
6</template>
正如您所看到的,您可以通过访问其属性(如props或listeners)直接访问背景对象。
这种方法的唯一缺点是,无法创建更高的顺序组件或进行推销操作,因为使用模板比简单的JavaScript(或JSX)更有限。
JSX 的
JSX 只是用 babel-plugin-transform-vue-jsx编写渲染函数的一种更棒的方式。
让我们创建 FunctionalButton 组件的 JSX 版本:
1[label FunctionalButtonJSX.js]
2export default {
3 functional: true,
4 render: (h, { data, children }) =>
5 <button {...data}>
6 {children}
7 </button >
8};
主要优点是,您拥有全功能的渲染函数和JavaScript,具有类似HTML的语法,这就是为什么您可以轻松地通过写{...data}来代理代理。
JSX 功能
当 React 用户看到之前的 JSX 示例时,他们可能会说 为什么你需要那个功能:真实的东西? 这是一种有效的陈述,因为他们只需要导出一个简单的函数,仅此而已。
在写作时,您可以通过使用 babel-plugin-jsx-vue-functional在Vue中完成此操作。
1$ npm install --save-dev babel-plugin-jsx-vue-functional
然后将其添加到.babelrc config:
1[label .babelrc]
2{
3 "presets": ["es2015"],
4 "plugins": ["jsx-vue-functional", "transform-vue-jsx"]
5}
最后,您可以通过简单地导出一个命名的箭头函数来写上面的示例:
1[label FunctionalButtonFunction.js]
2export const FunctionalButton = ({ data, children }) =>
3 <button {...data}>
4 {children}
5 </button >
包装上
正如你所看到的,Vue的主要优点之一是能够以多种方式编写一个组件,使其成为适应不同的人和团队的框架。
查找本文的代码在 this Codesandbox