Vue3+TS 父子传值问题“bug”点测试汇总|青训营笔记

86 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的第15天。

三种父传子方法设想:

1.通过props传值

2.provide/inject 传ref对象(回调函数中对ref赋值)

3.provide/inject传promise对象

第一种情况下,使用props传ref对象进子组件,使用的时候,没有后余项会正常显示,此时在编辑器中添加后余项,也是正常显示对应内容。但是如果有子项的情况下刷新或者一开始在模版中就设置带有后余项的ref展示,刷新页面就会报错。不清楚原因。

为什么ref可以获得promise中对其所赋的值?它获取值的逻辑是怎么样的?

props传的ref对象值,为什么不能设置成.value?直接传内容,而不是传一个响应式对象?

为什么父组件props进来的值,在子组件中defineProps接受,对应的响应式对象为什么不需要加Ref<>外框?不需要表示它这个传入进来的值是个响应式对象吗?这个外框什么时候加?就像Promise那样,内容需要有Promise外框包住。

第二种情况下,将inject的响应式对象直接展示,为什么不需要用.value读取内容,直接展示ref对象就能获取到之前赋值的内容?

第二种情况下,只能看到ref对象的整体,没有第一种情况下的内容属性提示。为什么没有内容提示?如何才能有提示?且同时,如果使用.运算符和中括号读取对象的属性值,主体内容会直接消失。

第二种情况下,在inject部分使用,Inject,没有什么特别的效果出现。那样写的效果和目的是什么?

第三种情况下,如果场外,模版外对响应式对象进行内容读取,需要.value,不然会报错,模版内使用.value,则会无反应,如果刷新页面会像之前那样报错。

场外对内容.value读取,会报错。

所有情况下,读取单一属性值,当前页面热更新没有问题,但是一旦刷新页面,就会黑屏。

三种情况下的展示,都只能展示整体,不能展示部分,可能是ref的原因?试试reactive。reactive下的也是一样的情况报错.

报错情况下,刷新一次无效,需要刷新两次,有一次会丢失页面所有内容,像是vite宕机。

如何实现ref对象的属性值展示?

如果有过路大侠可以帮助一下,感激不尽。