javascript - How to call component method from slot - Vue - Stack Overflow

I am new to Vue and have problem with Vue slots. I have my ponent like this<template><div cla

I am new to Vue and have problem with Vue slots. I have my ponent like this

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

As you can see there is a method hideDropdown which I would like to pass to my slot. For your inforamtion I am using this slot like this

<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(autopletePricesDesktop, editableCriteria.Price.To)" @click="">
            {{ price }}
        </li>
    </ul>
</div>
</drop-down>

What I want to achieve is to pass hideDropdown method from ponent to slot and use it on @click for each li. Is this possible ? I will apprecaite any help. Thanks in advance.

I am new to Vue and have problem with Vue slots. I have my ponent like this

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

As you can see there is a method hideDropdown which I would like to pass to my slot. For your inforamtion I am using this slot like this

<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(autopletePricesDesktop, editableCriteria.Price.To)" @click="">
            {{ price }}
        </li>
    </ul>
</div>
</drop-down>

What I want to achieve is to pass hideDropdown method from ponent to slot and use it on @click for each li. Is this possible ? I will apprecaite any help. Thanks in advance.

Share asked Mar 29, 2019 at 7:01 VueDevVueDev 311 silver badge2 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

The below code syntax is only useable from vue 2.6

Well you can actually achieve it. I am not sure if it's best practice. Here is how you can achieve it.

In your Parent ponent 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 ponent you will utilize 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(autopletePricesDesktop, editableCriteria.Price.To)" @click="callableFunc()">
            {{ price }}
        </li>
    </ul>
</div>
</template>
</drop-down>

Please take a look at the documentation https://v2.vuejs/v2/guide/ponents-slots.html#Scoped-Slots

I think that in order to separate concerns, the dropdown-container should be the one deciding when to close the dropdown, and the slot-contained ponent should emit an event that can be used to indicate that something has happened, for example, that an item has been selected.

I would make the container listen to an event on the slot: <slot v-on:item-selection="itemSelected" />

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

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

In this case, the event is called item-selection.

Then I would emit that event the contained ponent: <li class="hintList__item" v-for="price in lessThan(autopletePricesDesktop, editableCriteria.Price.To)" @click="itemClicked(price)">

... and a method in that ponent:

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

I hope this makes sense :-)

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745145669a4613637.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信