In Vue3.Parent component use child component’s render function, the components registered within the child component are not working

by

In JSX, if custom-component is registered by Child component,and Parent component use Child component’s render function to render custom-component. it will report Failed to resolve component: custom-component

Here is the demo code
Vue version: 3.3.4

child

export default defineComponent({
  components: {
    customComponent,
  },
  setup(props, ctx) {
       const renderCell = ()=><custom-component />
       //  parent component will get this function
       store.state.renderCell = renderCell
       render(){
          <div>demo</div>
       }
  }

parent

export default defineComponent({
  setup(props, ctx) {
       const renderCell = store.state.renderCell = renderCell
       render(){
          <div>{{renderCell()}}</div>
       }
  }

I noticed in the source code that the issue arises because currentRenderingInstance points to the parent component when rendering the custom-component

how should this be resolved?

  • seems like XY problem where Y is quite cumbersome. can you give full code for the parent and what do you want to achieve?

    – 




  • @AlexanderNenashev The parent component is trying to access the render functions of different child components stored in the store, and then execute this render function.

    – 

Leave a Comment