访问脚本标记内部的v-slot值

Question

我试图显示一个加载指示器，它位于一个包含插槽元素的组件内部(我们称之为包装器组件)。为此，我在包装器中设置了一个函数，该函数根据输入布尔值(setSpinnerVisible())设置指示器的状态。现在，我想从使用这个包装器的组件执行这个函数。为此，在父组件中，我使用v-slot属性来获取对该函数的引用。我希望能够在mounted()函数中调用这个函数，或者从methods函数中调用这个函数。

然而，我不知道如何做到这一点。我能想到的唯一方法是通过将这个v-slot值传递到一个函数中，该函数在像按钮按下这样的事件上执行，这是有效的，但我也希望能够从一个没有由布局中的动作执行的函数中调用这个方法(例如在mounted()函数中)。

这是我的包装器组件的一部分(为简洁起见，省略了切换旋转器的函数):

<template>
<slot v-bind:setSpinnerVisible="setSpinnerVisible"></slot>
...
<div class="spinner" v-show="spinnerVisible"></div>
</template>

这是使用包装器的组件的一部分:

<Wrapper v-slot="{ setSpinnerVisible }">
...
</Wrapper>

我希望能够以某种方式在mounted函数中使用setSpinnerVisible的值，就像这个虚构的代码:

<script>
export default {
mounted() {
this.setSpinnerVisible(true)
}
}
</script>

我使用Vue 2.6.11

Answer 1

您可以采用几种方法。

1. 例如，您可以访问父实例并调用所需的方法:

   。$ parent.setSpinnerVisible ()

2. 或者，你可以创建一个使用Wrapper的网关组件，获取setSpinnerVisible并将其作为prop传递给需要它的组件。

3. 你可以使用依赖注入。如下所述:https://v2.vuejs.org/v2/guide/components-edge-cases.html#Dependency-Injection

所以，在wrapper。vue

<template>
...
</template>
<script>
export default {
provide () {
return {
setSpinnerVisible: this.setSpinnerVisible
}
}
}
</script>

在子组件中:

<Wrapper>
...
</Wrapper>
<script>
export default {
inject: ['setSpinnerVisible'],
mounted() {
this.setSpinnerVisible(true)
}
}
</script>

最后一个是我推荐的方法，因为它更整洁，而且不是反模式的。