Skip to content
Advertisement

How do I communicate from a slot child definition to the containing component in vue 2.x?

I am writing a simple tooltip component. The contents of the tooltip are defined with a vue slot. I want the contents of the slot to be able to signal a close of the tooltip, the same way the tooltip can close itself from its own template.

Here’s example code:

JavaScript
JavaScript
JavaScript

Advertisement

Answer

You could add a ref attribute to the vtip component tag, and then reference the component’s closeDialog method via the $refs object:

JavaScript

JavaScript
JavaScript
JavaScript

Alternatively, you could also use a scoped slot, passing the closeDialog method as a click handler property in the props.

In the slot definition, bind a clickHandler property:

JavaScript

Then, in your parent component, you can access the clickHandler via the scoped props like so:

JavaScript

JavaScript
JavaScript
JavaScript
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement