实现组件 props 功能

前言

修改测试项目 example 中 App.js,将其中一个子节点的渲染方式改成子组件,并传入数据count

新建 Foo.js

实现的 props 功能需要满足一下 3 点:

  1. setup接受props传参,打印props可以输出count
  2. 渲染函数中可以通过this获取到propscount对象
  3. props只读不可修改,修改count值无效

运行 example 项目,目前是无法如期看到结果的。

依据以上总结的 3 项功能点,依次实现。

props传参

setup函数中接受props参数,那需要实现的焦点可以放在setup,component.ts 文件setupStatefulComponent方法中处理了setup函数,将函数执行结果赋给setupState

setup接受入参props,即在setup函数执行时,传入propsprops数据来源于父组件中引用子组件时,在第 2 个参数位置传入了props对象,也就是{count: 1},在创建父组件虚拟节点createVNode方法中接受了这个props对象,因此props数据是vnode上,而在setupStatefulComponent方法里就可以通过instance.vnode.props获取。

setupComponent方法中预留了initProps位置,在这个方法中初始化props,这里先简单的处理,把props对象直接挂载到实例instance上。

新建 componentProps.ts 文件,

在 component.ts 中引入,

setup函数中传入props

这样setup中接受props参数的功能点就实现了,我们期望的打印props就能输出{count: 1}

可以看出控制台已经如期打印结果,但是在页面渲染中,this.count无法识别,还是显示的undefined

this获取props对象

在之前的文章中,我们已经实现了setup返回的值,可以渲染到页面上。实现方法PublicInstanceProxyHandlers在 componentPublicInstance.ts 中。

验证

props只读不可修改

上面的验证结果可以看到,props是可以修改的,但是官方的实现是props不能修改,这样保证数据的单向传输。

之前文件已经实现了只读的方法,这里在引用的时候将其包裹即可,但是需要注意的是,props的只读不是readonly,而是shallowReadonly只做了一层的只读限制。

验证

总结

本文实现了props的 3 个功能点,setup支持接受props传参,渲染函数中可以通过this获取到props对象,最后就是props只读不可修改。

功能点的实现是其次,更重要的是实现的思路,也就是写代码的思路。3 个功能点的实现是依次完成,实现的关键从setup入手,既然setup函数是有props参数的,只需要在setup调用时传入即可;渲染函数中this能直接调取props中对象,和this能直接获取到setup返回值是一样的,是实现上也是一样的,都是通过proxy代理,那焦点自然就放到PublicInstanceProxyHandlersget函数中;只读属性的实现,直接调用之前的实现方法,在传参时候调用,就保证了props数据的可读属性。

相关推荐
2501_915918411 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂2 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip2 小时前
JavaScript二叉树相关概念
前端
attitude.x3 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java3 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)3 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术4 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫4 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css