Utilizing Slots in Vue: Accessing Component Methods

Question

Utilizing Slots in Vue: Accessing Component Methods

I recently started working with Vue and am facing an issue with Vue slots. The component structure is as follows:

<template>
<div class="dropDown__container">
  <div
    v-show="isOpened"
    class="dropDown__content"
    style="display:none;"
  >
    <slot />
    <div class="dropDown__container-flex">
      <span
        class="dropDown__button"
        @click="hideDropDown()"
      >
        Clear
      </span>
      <span
        class="dropDown__button"
        @click="hideDropDown(true)"
      >
        Submit
      </span>
    </div>
  </div>
</div>

There is a method called hideDropdown within the component that I want to pass to the slot. Here is how I am using the slot:

<drop-down>
<div class="d-flex flex-row justify-content-between">
    <ul id="priceFromList" class="hintList hintList--left">
        <li class="hintList__item" v-for="price in lessThan(autocompletePricesDesktop, editableCriteria.Price.To)" @click="">
            {{ price }}
        </li>
    </ul>
</div>
</drop-down>

I want to be able to pass the hideDropdown method from the component to the slot and use it within the @click event for each li element. Is this achievable? Any assistance would be greatly appreciated. Thank you.

javascript vue.js vuejs2

Answer 1

Answer №1

If you are using Vue 2.6 or higher, you can make use of the following code syntax:

It is possible to achieve this, although it may not be considered best practice. Here is how you can do it:

In your Parent component, you will bind the function to the slot

<slot :callableFunc="hideDropDown"/>

<template>
    <div class="dropDown__container">
      <div
        v-show="isOpened"
        class="dropDown__content"
        style="display:none;"
      >
        <slot :callableFunc="hideDropDown"/>
        <div class="dropDown__container-flex">
          <span
            class="dropDown__button"
            @click="hideDropDown()"
          >
            Clear
          </span>
          <span
            class="dropDown__button"
            @click="hideDropDown(true)"
          >
            Submit
          </span>
        </div>
      </div>
    </div>
  </template>

In your child component, you will use scoped-slots to access the binded function.

<drop-down>
<template v-slot:default="{ callableFunc}">
<div class="d-flex flex-row justify-content-between">
    <ul id="priceFromList" class="hintList hintList--left">
        <li class="hintList__item" v-for="price in lessThan(autocompletePricesDesktop, editableCriteria.Price.To)" @click="callableFunc()">
            {{ price }}
        </li>
    </ul>
</div>
</template>
</drop-down>

For more information, refer to the documentation https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots

Answer 2

If you are using Vue 2.6 or higher, you can make use of the following code syntax:

It is possible to achieve this, although it may not be considered best practice. Here is how you can do it:

In your Parent component, you will bind the function to the slot

<slot :callableFunc="hideDropDown"/>

<template>
    <div class="dropDown__container">
      <div
        v-show="isOpened"
        class="dropDown__content"
        style="display:none;"
      >
        <slot :callableFunc="hideDropDown"/>
        <div class="dropDown__container-flex">
          <span
            class="dropDown__button"
            @click="hideDropDown()"
          >
            Clear
          </span>
          <span
            class="dropDown__button"
            @click="hideDropDown(true)"
          >
            Submit
          </span>
        </div>
      </div>
    </div>
  </template>

In your child component, you will use scoped-slots to access the binded function.

<drop-down>
<template v-slot:default="{ callableFunc}">
<div class="d-flex flex-row justify-content-between">
    <ul id="priceFromList" class="hintList hintList--left">
        <li class="hintList__item" v-for="price in lessThan(autocompletePricesDesktop, editableCriteria.Price.To)" @click="callableFunc()">
            {{ price }}
        </li>
    </ul>
</div>
</template>
</drop-down>

For more information, refer to the documentation https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots

Answer 3

Answer №2

My approach to enhancing modularity involves giving the dropdown-container the responsibility of deciding when to close the dropdown, while the slot-contained component emits an event to signal an action, such as selecting an item.

To implement this, I would have the container listen for an event on the slot:

<slot v-on:item-selection="itemSelected" />

... and a function to handle the selected value:

function itemSelected(price) {
  this.price = price;
  hideDropdown();
}

In this scenario, the event is named item-selection.

Subsequently, I would emit the event from the contained component:

<li class="hintList__item" v-for="price in lessThan(autocompletePricesDesktop, editableCriteria.Price.To)" @click="itemClicked(price)">

... along with a method within that component:

itemClicked(price) {
    this.$emit('item-selection', price);
}

I trust that this logic is clear and provides improved modularity :-)

Answer 4

My approach to enhancing modularity involves giving the dropdown-container the responsibility of deciding when to close the dropdown, while the slot-contained component emits an event to signal an action, such as selecting an item.

To implement this, I would have the container listen for an event on the slot:

<slot v-on:item-selection="itemSelected" />

... and a function to handle the selected value:

function itemSelected(price) {
  this.price = price;
  hideDropdown();
}

In this scenario, the event is named item-selection.

Subsequently, I would emit the event from the contained component:

<li class="hintList__item" v-for="price in lessThan(autocompletePricesDesktop, editableCriteria.Price.To)" @click="itemClicked(price)">

... along with a method within that component:

itemClicked(price) {
    this.$emit('item-selection', price);
}

I trust that this logic is clear and provides improved modularity :-)

Utilizing Slots in Vue: Accessing Component Methods

Answer №1

Answer №2

Similar questions

What is the correct way to refresh v-for loops in Vue3?

Can you explain the meaning of the code `@input="$emit('input', $event)" used in a Vue component?

Executing a JavaScript file within the Meteor JS ecosystem

Tips for customizing the checked color of Material UI Radio buttons

Using various colors to highlight specific sections of a letter or number

How can the event listener be utilized with md-autocomplete?

JavaScript WYSIWYG Algorithm

What is the best way to prevent a folder from being included in the next js build process while still allowing

Switch the monitored variable's value in VueJS

Pause for a brief moment before proceeding to the next task within the map

AngularJS - the element of surprise in execution sequence

Interacting with touch events in JavaScript on Android devices

Issue with React: Children's state is altering the state of the parent component

Is it possible for me to manually access the vue-router parser?

Tips on mapping API response to the data attribute in Nuxt framework

What is the method for defining the current date variable within a .json object?

Looking for guidance on where to find a functional code sample or comprehensive tutorial on working with ViewMetadata in Angular2

I'm struggling to activate the eventListener on several elements with the same className or ID. Unfortunately, only the initial child is being triggered in my current code implementation

Using IF-ELSE statements in jQuery for DataTables

Tips for displaying a modal to a user only once