如何在 vue js 3 中将数据从组件传递到远组件

Question

我找不到将数据从组件传递到 vue 中的非 child 组件的方法。我正在处理一个 blade 文件，我有一个组件可以在暗模式和亮模式之间切换。我希望我的深色徽标显示深色和浅色徽标以显示浅色。问题是 provide/inject 无法解决我在 Vue 开发工具中看到的问题，即提供了我的值，但是当我检查其他组件时，注入的值未定义。我之前在下拉组件中做过，我能够传递值，因为它是关于一个 parent 组件及其 child 但现在我不能这样做。

我需要一种方法将数据从 Switchdark.vue 组件传递到 Svglogodark.vue 组件。

我的Switchdark.vue

<template>
    <div
        class="flex cursor-pointer items-center justify-between"
        @click="modeToggle"
    >
        <div
            class="flex h-4 w-12 items-center rounded-full bg-gray-300 p-1 duration-300 ease-in-out"
            :class="{ 'bg-green-400': toggleActive }"
        >
            <div
                class="h-3 w-3 transform rounded-full bg-white shadow-md duration-300 ease-in-out"
                :class="{ 'translate-x-7': toggleActive }"
            ></div>
        </div>
    </div>
</template>

<script>
import { provide, ref } from "vue";
import Svglogodark from "./Svglogodark.vue";
export default {
    components: [Svglogodark],
    props: ["theme"],
    data() {
        return {
            toggleActive: false,
        };
    },
    mounted() {
        if (this.theme === "false") {
            this.light();
        } else {
            this.dark();
        }
    },
    methods: {
        dark() {
            document.querySelector("body").classList.add("dark");
            this.toggleActive = true;
            this.$emit("dark");
        },
        light() {
            document.querySelector("body").classList.remove("dark");
            this.toggleActive = false;
            this.$emit("light");
        },

        modeToggle() {
            if (
                this.darkMode ||
                document.querySelector("body").classList.contains("dark")
            ) {
                this.light();
            } else {
                this.dark();
            }
            const isDarkModeOn = this.toggleActive;
            createCookie("isDarkModeOn", isDarkModeOn.toString(), 60 * 60 * 24);
        },
    },
    setup() {
        const toggleActive = ref(toggleActive);

        provide("toggleActive", toggleActive);

        return {
            toggleActive,
        };
    },
};
</script>

<style></style>

我的Svglogodark.vue:

<template>
    <svg
        v-if="toggleActive"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="170"
        height="70"
        viewBox="0 0 4792 1625"
    >
  
    </svg>
</template>

<script>
export default {
    inject: ["toggleActive"],
    created() {
        console.log(this.toggleActive);
    },
};
</script>

<style></style>

我将有两个 SVG，我希望它们显示我是否处于黑暗模式。

Answer 1

这里使用vuex你可以了解一下。 vuex-docs

或者

你可以使用简单的方法LocalStorage

\store item
localStorage.setItem('theme', 'dark');

\you can get anywhere
var theme = localStorage.getItem('theme');

console.log(theme); //'dark'

如何在 vue js 3 中将数据从组件传递到远组件

How to pass data from a component to far component in vue js 3

laravel

vue.js

laravel-blade

vue-component