浅谈Vue 函数式组件的使用技巧

什么是函数式组件

没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法，它只是一个接受一些 prop 的函数。简单来说是 一个无状态和无实例的组件

基本写法：

Vue.component('my-component', {
 functional: true,
 // Props 是可选的
 props: {
  // ...
 },
 // 为了弥补缺少的实例
 // 提供第二个参数作为上下文
 render: function(createElement, context) {
  // ...
 }
})

.vue 单文件组件写法

因为函数式组件没有 this，参数就是靠 context 来传递的了，有如下字段的对象：

• props：提供所有 prop 的对象
• children：VNode 子节点的数组
• slots：一个函数，返回了包含所有插槽的对象
• scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
• parent：对父组件的引用
• listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
• injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。

使用技巧

以下总结、都是基于使用