vuejs函数式组件
Posted 前端到全栈学习之路
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs函数式组件相关的知识，希望对你有一定的参考价值。
什么是函数式组件
我们可以把函数式组件想象成组件里的一个函数，入参的是渲染上下文，返回值是渲染好的html
对于函数式组件，可以这样定义：
Stateless（无状态）：组件自身是没有状态的
Instanceless(无实例): 组件自身没有实例，也就是没有this
由于函数式组件拥有这两个特性，我们就可以把它用作高阶组件（High order components），所谓高阶，就是可以生成其他组件的组件。 来看一个demo：
<template>
<div id="app">
<functional-button @click="log">click me</functional-button>
</div>
</template>
<script>
import FunctionalButton from "./components/FunctionalButton";
export default {
name: "App",
components: {
FunctionalButton
},
methods: {
log() {
console.log("click");
}
}
};
</script>
<style>
</style>
// FunctionalButton.js
export default {
name: "functional-button",
functional: true,
render(createElement, { data, children }) {
console.log("this", this); // => null
return createElement("button", data, children);
}
};
查看运行结果打印出来的this为null，
创造一个函数式组件
functional: true加上render function,就是一个最简单的函数式组件，下面就创建了一个简单的函数式组件
export default {
name: 'functional-button',
functional: true,
render(createElement, context) {
return createElement('button', 'click me');
}
}
就像上文所讲的，函数式组件没有this，参数是靠context来传递的，下面来看conetext有哪些属性呢
Render context
props
children
slots(a slots object)
parent
listeners
injections
data
上面的data包含了其他属性的引用，nibility,在下面的范例中会具体的使用到
现在来创建一个App.vue来引入上面的函数式组件
<template>
<FunctionalButton>
click me
</FunctionalButton>
</template>
上面的click me就是FunctionButton.js的children属性了，我们可以把组件改造下，由App.vue来定义组件的button按钮
export default {
name: 'funtional-button',
functional: true,
render(createElement, { children }) {
return createElement('button', children)
}
}
上面用了es6的解构，用{children}来代替context
事件定义
函数式组件没有实例，事件只能由父组件传递，下面在我们App.vue上定义一个最简单的click事件
<template>
<FunctionalButton @click="log">
click me
</FunctionalButton>
</template>
对应的FunctionalButton.js
export default {
name: 'functional-button',
functional: true,
render(createElement, {props, listeners, children}) {
return createElement('button',
{
attrs: props,
on: {
click: listeners.click
}
},
children);
}
}
简单的写法
尤大设计的Api还是很人性的，上面设计到的props,listeners那么多要传递的，是不是很麻烦，尤大直接把这个属性统一集成到data里面了，我们可以再改写下
export default {
name: 'functional-button',
functional: true,
render(createElement, {data, children}) {
return createElement('button', data, children);
}
}
是不是感觉清爽了很多
这就是一个完成的高阶组件了，下面小小的展示一下高阶的魅力
createElement('button', data, ['hello', ...children]);
demo可以查看源代码 https://github.com/suyunxue/demo/blob/master/vue-test/src/components/hoc.vue
以上是关于vuejs函数式组件的主要内容，如果未能解决你的问题，请参考以下文章