search

motla / vue-document-editor

:page_facing_up: Paper-sized WYSIWYG document editor for Vue apps
https://motla.github.io/vue-document-editor/
MIT License
313 stars 70 forks source link

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

Open imhuntun opened 1 year ago

imhuntun commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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. 未命名文件(15)

motla commented 1 year ago

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 commented 1 year ago

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.