Vue.js 在Vue中由单个子组件触发时，如何更改多个子组件的颜色

当一个动作由一个子组件触发时，如何影响由两个不同父组件拥有的多个子组件（在本例中仅为2个子组件）

例如，我有一个组件，我们称它为

。在这个组件中，我有如下内容：

<div @mouseover="hover=true" @mouseleave="hover=false" :class="setColour">
  <div class="icon-wrapper commercial-layout position-relative">
    <u-button icon color="transparent" @click="toggleCommercials">
      <u-icon :icon="icon" color="white"/>
    </u-button>
    <small class="commercial-ind">COMMERCIAL ADS</small>
    <div class="commercial-layout commercial-ind">{{hide}}</div>
  </div>
</div>

computed: {
  setColour () {
      if (this.hover) {
        return 'bg-danger'
      }
      else if (this.commercials) {
        return 'bg-primary'
      }
      else if (!this.commercials) {
        return 'bg-secondary'
  }
},
watch: {
    setColour: function(val) {
      console.log("val",val)
    }
  }

商业广告
{{hide}}
计算：{
setcolor（）{
如果（这个悬停）{
返回“背景危险”
}
否则，如果（本广告）{
返回“bg primary”
}
否则如果（！这个广告）{
返回“bg secondary”
}
},
观察：{
设置颜色：功能（val）{
console.log（“val”，val）
}
}

但是在代码库的其他地方，我有两个其他组件，让我们称它们为

和

。在这些组件中，我使用

组件一

。当我从

组件二

按下按钮时，我希望在

组件三

中也能触发相同的效果，反之亦然，但我不太确定如何做到这一点

---

目前

组件二

和

组件三

都只有

组件一

。我尝试在

组件一

中添加一个

手表

，但它除了捕获对

setcolor

计算属性的更改外，实际上什么都做不了。（我天真地认为，通过捕获更改，所有使用

组件1

的地方都会得到更新）

我不确定我是否完全理解您的特定组件关系，但总体上我建议使用Vuex

使用Vue 2和CLI，我创建了使用Vuex存储背景色CSS样式的示例SFC。每个子级都与特定颜色关联，单击其按钮可更新所有同级组件的颜色

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    commonBgColor: 'navajowhite'
  },
  mutations: {
    updateBgColor(state, newColor) {
      state.commonBgColor = newColor;
    }
  }
})

Parent.vue

<template>
  <div class="parent">
    <child initBgColor="aquamarine" instanceName="One" />
    <child initBgColor="mediumorchid" instanceName="Two" />
  </div>
</template>

<script>
  import Child from './Child.vue'

  export default {
    components: {
      Child
    }
  }
</script>

从“/Child.vue”导入子项
导出默认值{
组成部分：{
小孩
}
}

Child.vue

<template>
  <div class="child">
    <div class="row">
      <div class="col-md-6" :style="currentBgColor">
        <span>Sibling Component {{ instanceName }}</span>
        <button type="button" class="btn btn-secondary" @click="updateCommonBgColor">Change All Sibling Colors</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      initBgColor: {
        type: String,
        required: true
      },
      instanceName: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        backgroundColor: this.initBgColor
      }
    },
    computed: {
      currentBgColor() {
        return 'background-color: ' + this.$store.state.commonBgColor;
      }
    },
    methods: {
      updateCommonBgColor() {
        this.$store.commit('updateBgColor', this.backgroundColor);
      }
    }
  }
</script>

<style scoped>
  .child {
    margin-top: 0.5rem;
  }

  span {
    font-size: 1.5rem;
    padding: 0.5rem;
  }

  button {
    float: right;
  }
</style>

同级组件{{instanceName}}
更改所有兄弟颜色
导出默认值{
道具：{
initBgColor：{
类型：字符串，
必填项：true
},
instanceName：{
类型：字符串，
必填项：true
}
},
数据（）{
返回{
背景颜色：this.initBgColor
}
},
计算：{
currentBgColor（）{
返回“背景色：”+此.store.state.commonBgColor；
}
},
方法：{
updateCommonBgColor（）{
this.$store.commit（'updateBgColor'，this.backgroundColor'）；
}
}
}
.孩子{
边缘顶部：0.5雷姆；
}
跨度{
字体大小：1.5rem；
填充：0.5雷姆；
}
钮扣{
浮动：对；
}

我同意，我最终使用了vuex，谢谢