2

我想改变孩子的父CSS类，并在离开时重置它，怎么做？ 组件父级：

<template>
    <p id="parent" class="parent-text-color"> my text is red </p>
    <router-view />
</template>

<style>
.parent-text-color {
    color: red;
}
</style>

组件子-A：

<template>
    <p>child a</p>
</template>

组件子 B：

<template>
    <p>child b</p>
</template>

<style>
.parent-text-color {
    color: blue
}
</style>

样式在 child-B 范围内，没有变化

  • 去孩子a：文字是红色的
  • 转到孩子 b ：文本是红色的
  • 去孩子a：文字是红色的

样式不在 child-B 范围内，离开 child-B 后文本没有变化

  • 在孩子 a 上：文字是红色的
  • 在子 b 上：文本为蓝色
  • 在孩子 a 上：文本是蓝色的

如何解决？

部分解决方案

beforeMount () {
    document.getById('parrent').classList.add('parrent-changed-color')
}
beforeDestory () {
    document.getById('parrent').classList.remove('parrent-changed-color')
}

或在模板中添加样式标签

<template>
    <style>
    .parent-text-color {
        color: blue
    }
    </style>
    <p>child b</p>
</template>

但我不喜欢这个...

4

1 回答 1

0

一种可能的方法是使用条件类和一些事件通知：

父组件：

<template>
    <p id="parent" v-bind:class="{ parent: !hasChild, child: hasChild }" v-on:my-event="doSomething">this is my text</p>
    <router-view />
</template>

<style>
.parent {
    color: red;
}
.child {
    color: blue;
}
</style>

<script>
// ...
  methods: {
    doSomething (event) {
      this.hasChild = event.hasChild
    }
  }
</script>

子组件：

<template>
    <p>child b</p>
</template>

<script>
  // ...
  beforeMount () {
    this.$emit('my-event', { hasChild: true })
  },
  beforeDestory () {
    this.$emit('my-event', { hasChild: false })
  }
</script>

我认为主要目标是使组件与彼此的实现细节无关（意思是：组件不一定知道其他组件使用的类名是什么）。

于 2020-07-31T13:22:13.880 回答