vue中的函数式组件

用过react的同学都知道，函数式组件在react中的应用是很流行的，那如何在vue中使用函数式组件呢？

什么是函数式组件

熟悉react的同学应该都知道，react中的函数式组件其实就是一个接收一些prop的函数，然后返回HTML。vue的函数式组件也是如此。

特点

• 无状态：函数式组件本身是没有状态的，也就是没有响应式数据
• 无实例：函数式组件没有实例，也就是没有this上下文

写法

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

createElement 是创建虚拟dom的函数，关于createElement的详解，可移步https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0
由于上面说到函数式组件没有this，所以组件需要的一切都是通过context传递的，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。

下面我们来看一个简单的例子：

// functional-button.js
export default {
  functional: true,
  render(createElement, context) {
    console.log(context)
    return createElement('button', context.data, context.children)
  },
}

这里我们简单的实现了一个按钮组件，我们在render方法中打印context，以便查看context中具体包含的属性内容。
在组件中调用：

<template>
	<div>
        <ButtonC :text="111" @click="handleClick">函数式组件</ButtonC>
    </div>
</template>

<script>
    import ButtonC from '../functional-button'
    export default {
        name: "list",
        components:{
            ButtonC
        },
        methods:{
            handleClick(){
                console.log('111')
            }
        }
    }
</script>

我们给组件传了个text，并给按钮设置了click事件，下面是浏览器控制台打印的信息。

以上是关于vue函数式组件的简单使用，关于函数式组件在实际业务场景下的使用，我将在后面的文章中具体写到。https://blog.csdn.net/qq_16139383/article/details/106091046