访问脚本标签内的 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. 例如，您可以访问父实例并调用您需要的方法：

   this.$parent.setSpinnerVisible()

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

3. 您可以使用依赖注入。此处描述：https://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>

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