javascript - 如何在 Vue.js 中将特定颜色传递给父组件？

Question

本例中包含三个关键组件:卡(包装器)、面板(部分的父级，位于卡内)和部分(面板的子级，每个位于面板内)。因此，有一张卡，卡内有相同数量的面板和部分(正如我所说，部分位于它们自己的面板内)。

代码如下:

1) 卡:

<panel :collapsible="true" v-for="(item, key) in docSections" :key="key" :title="setSectionTitl(item)" :colorTitle="color">
  <template slot="body">
    <component
      :document="document"
      :sectionData="document.Sections[item]"
      :is="getSection(item)"
      :options="sectionOptions"
      @setColor="setColor"
    />
  </template>
</panel>

color: ''

methods: {
  setColor (color) {
    this.color = color
  }

如您所见，我们使用动态组件功能，该功能可以在面板内包含多个部分。

2) 部分:

mounted () {
  // setColor
  if (!this.sectionData.permitStart || !this.sectionData.permitFinish) {
    this.$emit('setColor', 'red')
  } else {
    this.$emit('setColor', 'black')
  }
}

3) 小组:

<h6
  :style="{ color: setTitleColor }"
  v-if="title"
  :title="title">
  {{ title }}
</h6>

props: {
  title: String,
  colorTitle: {
    type: String,
    default: ''
  }
  ...
}

computed: {
  setTitleColor () {
    if (this.colorTitle) {
      if (this.colorTitle === 'red') {
        return this.colorTitle
      } else {
        return 'black'
      }
    }
  }

它看起来怎么样:

组件在 DevTools 中的外观如何:

卡片是 wrapper ，里面有几个面板部分(可折叠)。在某些情况下，我需要绘制面板标题的部分(因为标题位于面板中)。这些条件并不存在于所有章节中。如果条件在“部分”中，则将其涂成红色，如果没有，则保持默认颜色。

问题是所有面板的标题都是红色的，但我还没有从所有部分发出。

如何解决包含我发出的部分的面板标题仅以红色绘制的问题？

Answer 1

您可能已经意识到这个问题:您的事件设置了 Card 组件的 color 属性。卡组件将这一color 属性传递给它的所有Panel 子组件。

如果您想在每个面板中拥有独立的color属性，则必须

1. 将逻辑移至面板并在那里设置颜色，或者

2. 为卡片中的每个子面板提供其自己的颜色值。您可以通过创建颜色数组并将正确的颜色(按索引)传递到 Pane 来实现这一点。

但是，根本不需要绕道您的部分来将颜色传递到您的面板。只需将逻辑移至您的卡即可:

<panel :collapsible="true" v-for="(item, key) in docSections" :key="key" :title="setSectionTitl(item)" :colorTitle="getColor(item)">
  <template slot="body">
    <component
      :document="document"
      :sectionData="document.Sections[item]"
      :is="getSection(item)"
      :options="sectionOptions"
      @setColor="setColor"
    />
  </template>
</panel>

methods: {
  getColor(item) {
    const permitFinish = this.document.Sections[item].permitFinish;
    const permitStart = this.document.Sections[item].permitStart;
    return permitStart && permitFinish ? 'black' : 'red';
  }
}