Pass an object from a child component (in slot) to a parent component in Vue 3

Question

I'm trying to implement a wrapper component for Tippy JS capable of using singletons. For that to work, I need to emit/gather tippy instances from the child elements (contained in a slot of the wrapper) and create a singleton from those.

I have seen multiple threads about using an event bus (such as mitt) to pass the data. The problem that I foresee is that the parent will not be ready to handle the event when the children emit them and I'm not sure how to link all the possible wrapper-child groups cleanly.

Note : I know of the Scoped Slot pattern, but I need to use the data in code (in the mounted hook to be precise) so I don't think it's a viable solution.

score 0 · Answer 1 · answered Apr 20 '21 at 16:59

I found a way to send the data from the child (the component in the slot) to the parent (the component hosting the slot) without using an event (to avoid sending it before the parent component is ready to listen to it and keep all the logic in the script part of the component).

The trick is to use the $parent property that gives access to the parent methods. By adding a saveData method to the parent and executing it from the children if needed it's possible to communicate data directly.

example:

// child component
export default {
  name: 'child',
  mounted() {
    // check if the method is available in the parent
    if (this.$parent.saveData) {
      this.$parent.saveData('the data to save');
    }
  }
}

// parent component
export default {
  name: 'parent',
  methods: {
    saveData(data) {
      // save or process the data as you need
    }
  }
}

Pass an object from a child component (in slot) to a parent component in Vue 3

1 Answers1