<template> <debounce-input placeholder="防抖" prefix-icon="el-icon-search" @input="inputEve"></debounce-input> </template> <script> import debounceInput from './debounce-input' export default { methods: { inputEve(value){ console.log(value) } }, components: { debounceInput } } </script>
上面组件的封装用了$attrs，虽然不需要开发者关注属性的传递，但是在使用上还是不方便的，因为把el-input封装在了内部这样对样式的限定也比较局限。有接触过react高阶组件的同学可能有了解，react高阶组件本质上是一个函数通过包裹被传入的React组件，经过一系列处理，最终返回一个相对增强的React组件。那么在vue中可以借鉴这种思路吗，我们来了解一下vue的函数式组件。
关于vue函数式组件
什么是函数式组件？
函数式组件是指用一个Function来渲染一个vue组件，这个组件只接受一些 prop，我们可以将这类组件标记为 functional，这意味着它无状态 (没有响应式数据)，也没有实例 (没有this上下文)。
一个函数式组件大概向下面这样：
export default () => { functional: true, props: { // Props 是可选的 }, // 为了弥补缺少的实例, 提供第二个参数作为上下文 render: function (createElement, context) { return vNode } }
注意：在 2.3.0 之前的版本中，如果一个函数式组件想要接收 prop，则 props 选项是必须的。在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的特性都会被自动隐式解析为 prop。但是你一旦注册了 prop 那么只有被注册的 prop 会出现在 context.prop 里。
render函数的第二个参数context用来代替上下文this他是一个包含如下字段的对象：
props：提供所有 prop 的对象
children: VNode 子节点的数组
slots: 一个函数，返回了包含所有插槽的对象
scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
parent：对父组件的引用
listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
injections: (2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的属性。
vm.$slots API 里面是什么
slots用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。
slots() 和 children 对比
你可能想知道为什么同时需要 slots() 和 children。slots().default 不是和 children 类似的吗？在一些场景中，是这样——但如果是如下的带有子节点的函数式组件呢？
<my-functional-component> <p v-slot:foo> first </p> <p>second</p> </my-functional-component>
对于这个组件，children 会给你两个段落标签，而 slots().default 只会传递第二个匿名段落标签，slots().foo 会传递第一个具名段落标签。同时拥有 children 和 slots()，因此你可以选择让组件感知某个插槽机制，还是简单地通过传递 children，移交给其它组件去处理。
一个函数式组件的使用场景
假设有一个a组件，引入了 a1,a2,a3 三个组件，a组件的父组件给a组件传入了一个type属性根据type的值a组件来决定显示 a1,a2,a3 中的那个组件。这样的场景a组件用函数式组件是非常方便的。那么为什么要用函数式组件呢？一句话：渲染开销低，因为函数式组件只是函数。
用函数式组件的方式来实现防抖
因为业务关系该防抖组件的封装同时支持 input、button、el-input、el-button 的使用，如果是input类组件对input事件做防抖处理，如果是button类组件对click事件做防抖处理。
const debounce = (fun, delay = 500, before) => { let timer = null return (params) => { timer && window.clearTimeout(timer) before && before(params) timer = window.setTimeout(() => { // click事件fun是Function input事件fun是Array if (!Array.isArray(fun)) { fun = [fun] } for (let i in fun) { fun[i](params) } timer = null }, parseInt(delay)) } } export default { name: 'Debounce', functional: true, // 静态组件 当不声明functional时该组件同样拥有上下文以及生命周期函数 render(createElement, context) { const before = context.props.before const time = context.props.time const vnodeList = context.slots().default if (vnodeList === undefined){ console.warn('<debounce> 组件必须要有子元素') return null } const vnode = vnodeList[0] || null // 获取子元素虚拟dom if (vnode.tag === 'input') { const defaultFun = vnode.data.on.input const debounceFun = debounce(defaultFun, time, before) // 获取节流函数 vnode.data.on.input = debounceFun } else if (vnode.tag === 'button') { const defaultFun = vnode.data.on.click const debounceFun = debounce(defaultFun, time, before) // 获取节流函数 vnode.data.on.click = debounceFun } else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-input') { const defaultFun = vnode.componentOptions.listeners.input const debounceFun = debounce(defaultFun, time, before) // 获取节流函数 vnode.componentOptions.listeners.input = debounceFun } else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-button') { const defaultFun = vnode.componentOptions.listeners.click const debounceFun = debounce(defaultFun, time, before) // 获取节流函数 vnode.componentOptions.listeners.click = debounceFun } else { console.warn('<debounce> 组件内只能出现下面组件的任意一个且唯一 el-button、el-input、button、input') return vnode } return vnode } }