listening to javascript custom event inside vuejs component

Question

I created a custom event and dispatched it in my main page script, which includes a Vue component. How do I listen to that event from inside the Vue component?

main.blade.php:

<body>
   <insert-block></insert-block>
   <script>
      const insert_block_event = new CustomEvent('insert_block', { detail: 'some detail goes here' });
      document.body.dispatchEvent(insert_block_event);
   </script>
</body>

Answer 1

Since you're dispatching on document.body , your component could listen to the event on document.body with addEventListener in the mounted() hook, and removeEventListener in the beforeDestroy() hook:

// MyComponent.vue
export default {
  mounted() {
    document.body.addEventListener('insert_block', this.onInsertBlock)
  },
  beforeDestroy() {
    document.body.removeEventListener('insert_block', this.onInsertBlock)
  },
  methods: {
    onInsertBlock(e) {
      console.log('insert_block', e)
    }
  }
}

listening to javascript custom event inside vuejs component

Question

1 answers

solution1
0 ACCPTED 2020-10-12 02:35:40

listening to javascript custom event inside vuejs component

Question

1 answers

solution1 0 ACCPTED 2020-10-12 02:35:40

solution1
0 ACCPTED 2020-10-12 02:35:40