如何从广告位调用组件方法-Vue

时间:2019-03-29 07:01:48

标签: javascript vue.js vuejs2

我是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的{​​{1}}上使用它。这可能吗 ?我将不胜感激。预先感谢。

2 个答案:

答案 0 :(得分:0)

我认为,为了分开关注点,应该由下拉容器来决定何时关闭下拉菜单,并且包含插槽的组件应发出一个事件,该事件可用于指示发生了某些事情,例如,表明已选择一个项目。

我会让容器监听插槽上的事件: <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);
}

我希望这是有道理的:-)

答案 1 :(得分:0)

  

下面的代码语法仅在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

在子组件中,您将利用作用域插槽来访问绑定的函数。

<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