Emitting events from vce to parent app

karol-f / vue-custom-element

Vue Custom Element - Web Components' Custom Elements for Vue.js

https://karol-f.github.io/vue-custom-element/

MIT License

1.97k stars 187 forks source link

Closed guillaumeduhan closed 5 years ago

guillaumeduhan commented 5 years ago

Hello guys,

I've been searching and testing but I didn't find any solution. I'll try to explain it very clearly:

This is my situation: with Vue Custom Element, I import my component A from John to Sam.

A is my child component coming from John.

Sam is my parent where A goes.

I tried to emit an event from A to Sam but it didn't work.

Question: can I emit an event from A to Sam? is it possible?

Documentation: listening to Vue component $emit'ed events.

Thanks for your answers.

Guillaume

karol-f commented 5 years ago

Can You please prepare Codesandbox.io example? It works be much easier to debug the issue. Regards.

guillaumeduhan commented 5 years ago

Hello @karol-f and thanks for your answer,

hello-world component emit 'myEvent'. I want to know if any future parent can receive myEvent.

I already tried to catch an event from a VCE in a parent but it didn't work with: "this.$on...."

Thanks for help ;)

karol-f commented 5 years ago

Hi, I've checked Your sandbox and I can see 2 problems:

HelloWorld component was registered both as Custom Element and Vue component - choose one way that best suit your needs. In https://codesandbox.io/s/vue-template-gi8b3 I've left only Custom Element but You can also leave Vue component as it's consumed inside Vue app
event wast not listened to in App.vue. I've just added @myEvent="onMyEvent" and it's working.

If You will have more questions feel free to ask them. Regards!

guillaumeduhan commented 5 years ago

Thank you very much @karol-f it's working.

Regards