使用 Composable 从子组件单击按钮时，在父组件中切换 div

Question

我有 3 页：

spinner.js - 可组合。切换加载微调器的函数
App.vue - 父组件
Test.vue - 子组件

我需要做的是当我点击 Test.vue 的按钮时，App.vue 应该知道 loading 的值已经改变并且应该 show/hide div 相应地。

我试过使用 watch，但我并没有完全掌握如何使用它。我尝试阅读文档，但对我来说仍然很模糊。

对于这种情况，我应该使用 emit 吗？但是我需要使用可组合的 spinner.js

spinner.js

import { ref } from 'vue'
export default function useSpinner() {
    const loading = ref(false)

    const isLoading = async (isLoading) => {
        loading.value = isLoading
    }

    return {
        loading,
        isLoading,
    }
}

Test.vue

<template>
    <button @click="showSpinner">Show Spinner</button>
</template>

<script>
import useSpinner from "./composables/spinner.js"

export default {
    setup() {
        const { isLoading } = useSpinner()

        // Calls `isLoading()` from `spinner.js` to change the value of `loading`
        const showSpinner = async () => {
            isLoading(true)
        }
        return {
            loading,
            showSpinner,
        }
    },
}
</script>

App.vue

<template>
    <div v-if="loading">Hello Loading Spinner</div>
</template>

<script>
import useSpinner from "./composables/spinner.js"
import { watch } from "vue";

export default {
    setup() {
        const { loading } = useSpinner()

        // should watch when `loading` was changed to toggle div
        watch(loading, (currentValue, oldValue) => {
            console.log(currentValue);
            console.log(oldValue);
        });

        return {
            loading,
        }
    },
}
</script>

Answer 1

const loading = ref(false) 需要在导出之外。示例：

import { ref } from 'vue';
const loading = ref(false);
export default function useSpinner() {
    const isLoading = (isLoading) => {
        loading.value = isLoading
    }
    return {
        loading,
        isLoading,
    };
}

如果没有，当您使用该函数导入加载引用时，Test.vue 和 App.vue 都会有自己的加载实例。

使用 Composable 从子组件单击按钮时，在父组件中切换 div

Toggle div in parent component when button is clicked from child component using Composable

vuejs3

composable

laravel-8