vue怎样在子页面获取父页面的类名，并修改样式

在Vue.js中，子组件想要获取并操作父组件的样式通常有两种方法：

1. **props（属性）**：你可以通过props从父组件传递一个包含class名的对象。首先，在父组件上定义这个prop，然后在子组件模板中接收它：

<!-- 父组件 -->
<template>
  <div :classes="parentClass" ref="parentRef">...</div>
</template>

<script>
export default {
  props: ['parentClass'],
  data() {
    return { };
  },
  methods: {
    // 子组件可以使用this.$refs.parentRef来访问到父元素
    updateStyle(newClassName) {
      this.$nextTick(() => {
        this.$refs.parentRef.classList.remove(this.parentClass);
        this.$refs.parentRef.classList.add(newClassName);
      });
    }
  }
}
</script>

在子组件里，你可以通过`this.updateStyle('new-class')`来更改样式。

2. **Event Bus** 或者 **Vuex**：如果需要在更复杂的场景下共享状态，可以考虑使用事件总线（Event Emitter）或状态管理库（如Vuex）。子组件触发事件，父组件监听该事件并处理样式更新。

// 使用Event Bus
import bus from '@/eventBus';

// 子组件
methods: {
  changeParentStyle(newClassName) {
    bus.$emit('updateParentClass', newClassName);
  }
}

// 父组件
created() {
  bus.$on('updateParentClass', className => {
    this.$refs.parentElement.classList.replace(...this.currentClasses, className);
  });
}