如果孩子在vue上课，如何设置父母的样式？

Question

如果孩子上课，如何设置父div的样式？ 我尝试使用$ refs计算，但$ refs。[class]总是未定义

示例

<div 
:style="isChildHasClass"
class="container">
    <div class="child example"></div>
</div>

如果使用类“容器”来设置div块的样式，只有当子块具有类“示例”时才会这样？

Answer 1

试试这个：

new Vue({
  el: "#app",
  data: {
    isExample: true,
  },
  created() {
    setInterval(() => {
      this.isExample = !this.isExample
    }, 2000)
  },
  computed: {
    parentClasses() {
      return ['parent', this.isExample ? 'container' : null];
    },
    childClasses() {
      return ['child', this.isExample ? 'example' : null]
    }
  }

})

.container {
  background: tomato;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <div :class="parentClasses">
    parentClasses: {{parentClasses}}
    <div :class="childClasses">childClasses: {{childClasses}}</div>
  </div>
</div>