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

Question

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

然而，我不知道如何做到这一点。我能想到的唯一方法是将这个v槽值传递到一个函数中，该函数在按钮按下之类的事件上执行，这是可行的，但我也希望能够从布局中未由操作执行的函数(例如，在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()

1. Alternatively，您可以创建一个使用包装器的网关组件，获取setSpinnerVisible并将其作为道具传递给需要它的组件。

1. 你可以使用依赖注入。在这里描述：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>

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