用过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

Logo

前往低代码交流专区

更多推荐