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