vue3 父级传给子组件render函数时的scopeId和父级不一致?-灵析社区

小飞侠007

父级: import { defineComponent, h, withCtx, getCurrentInstance } from 'vue' import Comp from './Comp.vue' export default defineComponent({ components: { Comp }, setup() { const ins = getCurrentInstance() return { r: () => h('span', { class: 'span' }, '哈哈') // r: withCtx(() => h('span', { class: 'span' }, '哈哈'), ins) } }, }) .span { color: blue; } 子组件: import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Comp', props: { r: Function }, setup(props) { return () => h('div', { class: 'comp' }, props.r()) }, }) .comp { color: red } ![](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/d7d51016aa0fe29b502b90c244418c23.png) ![](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/289f36ae926428e0f3e0dbd70f4496af.png) 如果使用`withCtx(() => h('span', { class: 'span' }, '哈哈'), ins)`是可以让`span`的`scopeId`和父级一致,但是这样必须在每个使用了子组件的父级里写一遍,太麻烦还容易漏,官方文档根本没写这东西 所以有没有一种方式,能通过修改子组件,父级不需要传其他乱七八糟的比如`instance`之类的给子组件,就能达到说子组件接收的`render`函数始终使用传入者的`scopeId`?

阅读量:202

点赞量:0

问AI
实在要在子组件做那就只能用非标方式,直接从"vnode"上拿值写入, "return () => h('div', { class: 'comp',[getCurrentInstance().parent.type.__scopeId]: '' }, props.r())" 从命名上也知道这是个私有属性,最好是不要用