我找不到將資料從組件傳遞到 vue 中的非子組件的方法。我正在使用刀片檔案，并且我有一個組件可以在暗模式和亮模式之間切換。我希望我的深色徽標顯示深色，淺色徽標顯示淺色。問題是提供/注入無法解決我在 Vue 開發工具中看到我的值已提供但當我檢查其他組件時注入的值未定義的問題。我之前在下拉組件中做過，我能夠傳遞值，因為它是關于一個父組件及其子組件，但現在我不能這樣做。
我需要一種將資料從我的 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，我希望它們顯示我是否處于暗模式。
uj5u.com熱心網友回復：
在這里使用 vuex 你可以了解它。vuex 檔案
要么
您可以使用簡單的方法，即LocalStorage
\\store item
localStorage.setItem('theme', 'dark');
\\you can get anywhere
var theme = localStorage.getItem('theme');
console.log(theme); //'dark'
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/432538.html
標籤：拉拉维尔 Vue.js Vue组件 laravel-刀片
上一篇：即使表已經存在，如何運行遷移？