时间戳

首页 > 解决方案 > 访问脚本标签内的 v-slot 值

vue.js - 访问脚本标签内的 v-slot 值

问题描述

我试图显示一个加载指示器，它位于包含插槽元素的组件内部（让我们称之为包装器组件）。为此，我在包装器中有一个函数，它根据输入布尔值 ( 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>

我希望能够以一种或另一种方式使用函数setSpinnerVisible内部的值mounted，就像这段虚构的代码一样：

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

我正在使用 Vue 2.6.11

标签： vue.jsvuejs2v-slot

解决方案

您可以采取几种方法。

  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>

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

推荐阅读