Как вызвать метод компонента из слота - Vue

Question

Я новичок в Vue и у меня проблемы с Vue slots. У меня есть мой компонент, как это

<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>

Как видите, есть метод hideDropdown, который я хотел бы передать моему slot. Для вашей информации я использую это 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>

Чего я хочу добиться - это передать метод hideDropdown из компонента в slot и использовать его в @click для каждого li. Это возможно ? Я буду признателен за любую помощь. Заранее спасибо.

Answer 1

Синтаксис приведенного ниже кода можно использовать только с vue 2.6

Ну, вы действительно можете этого достичь.Я не уверен, что это лучшая практика.Вот как вы можете этого добиться.

В вашем родительском компоненте будет привязана функция к слоту <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

В вашем дочернем компоненте вы будете использовать scoped-slots для доступа кСвязанная функция.

<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>

Пожалуйста, ознакомьтесь с документацией https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots

Answer 2

Я думаю, что для того, чтобы разделить озабоченности, выпадающий контейнер должен быть тем, который решает, когда закрывать выпадающий список, а компонент, содержащий слоты, должен выдавать событие, которое может использоваться, чтобы указать, что что-то произошло, например , что предмет был выбран.

Я бы заставил контейнер слушать событие в слоте: <slot v-on:item-selection="itemSelected" />

... и функция для получения выбранного значения:

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

В этом случае событие называется item-selection.

Тогда я бы выпустил это событие из компонента: <li class="hintList__item" v-for="price in lessThan(autocompletePricesDesktop, editableCriteria.Price.To)" @click="itemClicked(price)">

... и метод в этом компоненте:

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

Надеюсь, это имеет смысл: -)