1.前言

1. vue其实也有函数式组件哦,不是react才有函数组件的
   这篇文章之前,建议先看下渲染函数标题组件,有衔接关系

2.函数组件概念也都一样
组件没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期访问
优点就是 轻量,灵活

简单翻译 既没有 data, 也没有 this

2.函数式组件写法

2.1 标志是functional

functional:true, //函数组件

2.2 没有this的影响

1. 没有template了,写上也不生效
2. 所有属性通过 render的第二个参数 conetxt传递
   简单的说就是把用到this获取属性的地方 ,属性都从 context的props解构出来
   在这篇文章渲染函数标题组件,基础上进行修改

3.贴图比较

1.png

4. 上代码

效果和之前的是一样的

 Vue.component("heading", {
            functional:true, //函数组件
            props: {
                level: {
                    type: String,
                    default: "1"
                },
                title: {
                    type: String,
                    default: ""
                },
                icon: {
                    type: String
                }
            },
            render(h,context) {
                // 子节点数组
                console.log("上下文:",context);
                let children = []
                // 属性获取的变化
                const {icon,title,level} = context.props
                
                // icon处理
                if (icon) {
                    children.push(h(
                        "svg",
                        { class: "icon" },
                        [h("use", {
                            attrs: { 'xlink:href': '#icon-' +icon }
                        })]
                    ))
                }
                children = children.concat(context.children)
                const vnode = h(
                    "h" + level,
                    { attrs: { title } },
                    children
                )
                console.log("查看", vnode);
                return vnode
            }
        })

参考资料

函数式组件

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉