Javascript 如何从Vue中的组件更改视图文件上的：类名？

我目前有两个活动主题使用顺风灯主题和黑暗主题，但我不能让它在一个外部按钮组件中工作，只是在视图中的代码和功能

这只是一个示例，其中视图中的函数是可以接受的，但我有一个实际案例，需要它从组件开始工作，在暗/亮模式之间更改类

以下是导入ButtonA和ButtomB的my Home.vue文件：

Home.vue有一个正在更改主题的工作按钮

钮扣

它只有HTML和应用于组件的函数

<template>
    <div>
        <button class="border border-gray-400 bg-blue-500 hover:bg-blue-700 text-white p-2 rounded"> {{ msg }} </button>
    </div>
</template>

<script>
export default {
    name: "ButtonComp",
    props: [
        'msg'
    ]
}
</script>

钮扣

这是一个不起作用的。该函数应该更改Home.vue上的：class，但我只在控制台上获取值，并且：class不起作用

---

我以前尝试过$emit和computed属性，但没有成功。

您应该将主题传递给Home.vue中的ButtonB组件：

<ButtonB msg="Full from component" :theme.sync="theme" />

然后在ButtonB组件中，单击将值发射回父对象：

<script>
export default {
    name: "ButtonComp",
    props: [
        'msg',
        'theme'
    ],
    methods: {
        toggleThemeTree() {
            let theme = this.theme === 'theme-light' ? 'theme-dark' : 'theme-light' // Do not change this.theme directly
            localStorage.setItem('theme', theme)
            this.$emit('update:theme', theme)
        },
    },
}
</script>

---

我让它更新let主题，使之成为let theme=this.theme=this.theme==='theme light'？'主题暗“：“主题光”。Tks

<ButtonB msg="Full from component" :theme.sync="theme" />

<script>
export default {
    name: "ButtonComp",
    props: [
        'msg',
        'theme'
    ],
    methods: {
        toggleThemeTree() {
            let theme = this.theme === 'theme-light' ? 'theme-dark' : 'theme-light' // Do not change this.theme directly
            localStorage.setItem('theme', theme)
            this.$emit('update:theme', theme)
        },
    },
}
</script>