- 发布：2022-06-02 01:09
- 更新：2022-06-05 11:59
- 阅读：1001
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 12.3
HBuilderX类型： Alpha
HBuilderX版本号： 3.4.13
手机系统： 全部
手机系统版本号： Android 12
手机厂商： 小米
手机机型： 红米k40
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
微信小程序vue2获取插槽节点：
this.$slots.default
微信小程序vue3获取插槽节点
this.$slots.default()
H5、APP通过$parent向父节点传值：
子节点：this.$parenr.a = this
父节点输出为undefined
微信小程序vue2获取插槽节点：
this.$slots.default
微信小程序vue3获取插槽节点
this.$slots.default()
H5、APP通过$parent向父节点传值：
子节点：this.$parenr.a = this
父节点输出为undefined
操作步骤：
微信小程序vue2获取插槽节点：
this.$slots.default
微信小程序vue3获取插槽节点
this.$slots.default()
H5、APP通过$parent向父节点传值：
子节点：this.$parent.a = this
父节点输出为undefined
微信小程序vue2获取插槽节点：
this.$slots.default
微信小程序vue3获取插槽节点
this.$slots.default()
H5、APP通过$parent向父节点传值：
子节点：this.$parent.a = this
父节点输出为undefined
预期结果：
this.$slots.default正常获取插槽节点列表
this.$parent.a正常获取子节点信息（此写法参照uni-form和uni-form-item）
this.$slots.default正常获取插槽节点列表
this.$parent.a正常获取子节点信息（此写法参照uni-form和uni-form-item）
实际结果：
this.$slots.default 值为ture而不是列表
this.$parent.a值为undefined而不是子节点的this
this.$slots.default 值为ture而不是列表
this.$parent.a值为undefined而不是子节点的this
bug描述：
- 微信小程序通过 $slots获取到的default值为true，而不是插槽节点列表
- APP和H5插槽节点通过$parent.a对父节点的a进行复制时，父节点取到a的值为undefined
3 个回复
a***@80boys.com - 原生土豆泥
不懂帮顶
tmui
刚好看到，帮下你吧
建议不要用这种方式。vue3同时也取消了$children的。父级是可以取到，但它的父级并不一定是你认为的父级，它是按层级往上冒泡找到父点的。解决方案：
如何找父节点？：
1、父节点定义标识。
2、子节点通过冒泡循环获得父节点，执行找到标识即为离他最近的父节点。
如何获取子节点？
因为vue3取消了$children，当然在h5可以$slot取得，但在跨平台中这种方式，坚决不要使用。
解决方案：
1、父节点定义方法
2、子节点渲染期，找到父节点，然后执行父节点方法向其报告或者推送子节点信息，父节点缓存它的所有子组件。
3、子组件注销也要向父报告，让父组件从缓存中删除该节点，以同步信息。
这样的方案好处是：
1、全平台兼容。
2、父子组件通信方便，方便处理。
你可以下载我的vue3组件库学习这种方案。
云逻星空 (作者)
你理解错我的意思了，我是通过$parent把子节点push个父节点，懂？不是直接获取子节点
2022-06-02 21:54
云逻星空 (作者)
回答之前先看清下问题，但还是感谢你的回答，不过有点不好就是广告，个人有点讨厌哈
2022-06-02 21:55
云逻星空 (作者)
另外就是，通过$parent吧子节点推送给父节点小程序中是可行的，我也是用这种方案，但h5和app是不行的，官方的uni-form也是存在这种问题
2022-06-02 21:58
呆狗的一生
你们俩真逗，我来看看
2022-06-05 11:51
呆狗的一生 - 呆狗的一生
快上传个demo来，看看你们俩谁说的有理
tmui
回复 呆狗的一生: 那人家在我身上打个个打广告的标签，你说无语，好心当驴踢。
2022-06-05 12:54
云逻星空 (作者)
官方的uni-form和uni-form-item就是demo，这个就出现我说的这种情况，子组件把自身实例push进父组件进行缓存，在小程序这种方法是可以行的通的，但在h5里面只能通过获取插槽的方式
2022-06-07 11:39
tmui
回复 云逻星空: 我本不想与你作任何讨论的，但本着我善良我还是再帮你下：
使用inject 和provide，前面说的parent推送和销毁，只是告诉父组件你的存在。
1、子获取父的数据，使用inject，还可以响应式，并且可监听父组件的数据是否修改。
2、子修改父数据，通过parent方法。
3、父修改子数据，通过provide向下发送修改指令参数，子监听后进行判断是修改还是其它任意命令。
3、父读取子数据，使用parent的方法向父推送即可。
通过以上方法你将：全平台兼容。
以后对帮你的人客户气点，至少要尊重，不要那么傲娇！！！
2022-06-08 22:43