provider/inject not work between parent and child component in vue3

[imhuntun]

Describe the bug
I pass in a component by templete, and the data provided by the outermost component cannot be read by inject in the child component.

in parent component:
provide('setting', {a:1,b:1});

in child component:
const setting = inject('setting'); // get nothing

[motla]

Hi! Thanks for your interest on the library. Can you share a minimal example showing your issue so I can debug it? (the easiest way is to fork this project on github, make modifications and rebuild it).

Another way to pass data to template components is to use modelValue property as shown in the demo (docs here, example here and here)

[imhuntun]

After version 2.1, you adjusted the component loading mode to load the component as a customElement, causing the loaded component file name to have to end with ce.vue. In more complex component nesting, the component styles after the second layer cannot be loaded properly.

I wonder if my use method is wrong? If there is a correct method, I hope to give examples.

Finally, thank you very much for your effort, this component is very useful.

My component structure is shown below.

[motla]

Thanks for the clear explanation.
Indeed I had to use a customElement, otherwise conflicts happened between Vue3 and the contenteditable DOM.
Maybe I could try to improve this in the future (manage templates differently) but it seems not an easy task...
I don't like the .ce.vue system either so I leave this issue open as a reminder.

If you still can't get your project working I can take a look at it to help you.

[imhuntun]

Thank you for your answer, then I have to continue to use version 2.0.7, my program can be used normally on this version.