Version

3.1.1

Reproduction link

sfc.vuejs

Steps to reproduce

1. Call the setVNode method to set up the content of the subcomponent in the onMounted of the parent component.
2. Click the show target button to display the sub components
3. It is found that setvnode has no effect
4. Click the set vnode content button, and the set vnode effect will come out
5. Click the hide target button to hide the subcomponent, and then click the show target button to show the subcomponent again
6. Find that the content of the subcomponent becomes blank
7. The corresponding operation of the set html content button does not have this problem

What is expected?

The parent component can dynamically switch the content of the child component between HTML fragment and vnode

What is actually happening?

When the subcomponent is hidden, setting content to vnode is invalid; When the subcomponent is in the display state, setting the content to vnode is effective, but it becomes blank after it is hidden and displayed again

1. Subcomponent can display content through content property or default slot settings. Content property supports HTML fragment strings and vnode
2. Code supporting vnode

watch(() => props.content , (newVal, oldVal) => {
  if(!internalInstance) return;
  if (isVNode(newVal)) {
    internalInstance.slots.default = () => [newVal];
    innerContent.value = '';
  } else {
    if(isVNode(oldVal) && !isVNode(newVal)){
      delete internalInstance.slots.default;
    }
    innerContent.value = newVal;
  }
});

You cannot change the slots programatically, only declaratevely. Regarding your code, you can do this. BTW, the ref containing a vnode should be a shallowRef

Remember to use the forum or the Discord chat to ask questions!