Vue Slot Props Example

Posted on

Universal dropdown menu component for Vue. Any element can be dropdown trigger and anything can be dropdown content.

Now, when we have the slot in the child component, we need to receive and consume the exposed props in the parent component. Receive exposed props in the parent component using the slot-scope attribute. To receive the props in the parent component, we declare a template element and use the slot-scope attribute. This attribute has access to. In this tutorial, we will learn about how to use the slots in vue.js with the help of examples. Slots helps us to pass the data between opening and closing component tags. In vue.js props are used to pass the data to its child components, but it is hard to pass when we have a complex code. In such cases slots can be used. Vue-slot-checker provide functions like checking props. Scoped slots example with vue 2.1 In this demo we're using the new scoped slots in Vue 2.1 to create a.

In this example, myMethod is a method defined on the child vue component. (I am using typescript, so it is a method on the component class) Any ideas on how to pass a function defined on the child component back through the slot props to the parent so that it can be called from within the slot code in the parent?

Fully customizable - supports left/right opening, open on hover/click, interactive mode ...

# Installation

or

import to use:

# Example

(boolean) open menu on the right side of the element
(boolean) open menu on hover (instead of click)
(boolean) do not close the dropdown until clicked outside
(boolean) do not close the dropdown WHEN clicked outside
(string) the transition for the menu. If checked in the demo we use 'translate-fade-down' which is added in the demo component. Below is the source of the css effect.
translate-fade-down.css
Examples

# Demo source

# Props

PropTypeDefaultDescription
valueBooleanfalseOpens/closes the dropdown. The component uses v-model to control the state of the dropdown.
rightBooleanfalseWhether to stick the dropdown on the right side of the element.
hoverBooleanfalseIf true the menu is open on hover (after hover_time) else it is open on click.
closeOnClickOutsideBooleantrueShould the menu close when clicked outside
hover_timeIntegerfalseTime before the menu opens in hover model. Default: 100ms
transitionString'The vue transition name used to open the menu.

# Slots

# default

This slot is the element that triggers the dropdown. It can be any HTML element, the components surrounds it with a div which handles the events like hover/click etc.

# dropdown

Vue Slot Props Examples

This slot is the content of the dropdown menu.