[英]How to call component method from slot - Vue
I am new to Vue and have problem with Vue slots
.我是 Vue 新手,对 Vue slots
有疑问。 I have my component 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
.如您所见,有一个方法hideDropdown
我想传递给我的slot
。 For your inforamtion I am using this slot
like this为了您的信息,我正在像这样使用这个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>
What I want to achieve is to pass hideDropdown
method from component to slot
and use it on @click
for each li
.我想要实现的是将hideDropdown
方法从组件传递到slot
,并在@click
上为每个li
使用它。 Is this possible ?这可能吗 ? I will apprecaite any help.我会感谢任何帮助。 Thanks in advance.提前致谢。
The below code syntax is only useable from vue 2.6以下代码语法仅适用于 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 component will bind the function to the slot <slot :callableFunc="hideDropDown"/>
在您的父组件中,将函数绑定到插槽<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 utilize scoped-slots to access the binded function.在您的子组件中,您将使用 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>
Please take a look at the documentation https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots请查看文档https://v2.vuejs.org/v2/guide/components-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 component 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" />
我会让容器监听插槽上的事件: <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
.在这种情况下,该事件称为item-selection
。
Then I would emit that event the contained component: <li class="hintList__item" v-for="price in lessThan(autocompletePricesDesktop, editableCriteria.Price.To)" @click="itemClicked(price)">
然后我会在包含的组件中发出该事件: <li class="hintList__item" v-for="price in lessThan(autocompletePricesDesktop, editableCriteria.Price.To)" @click="itemClicked(price)">
... and a method in that component: ...以及该组件中的方法:
itemClicked(price) {
this.$emit('item-selection', price);
}
I hope this makes sense :-)我希望这是有道理的 :-)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.