Javascript 如何在Vue中设置父组件的样式

我目前正在使用Vue 2.x构建一个自定义覆盖组件。组件有一个道具，它允许组件处于绝对位置或固定位置

问题是，当我打开绝对位置时，我想向父组件添加

position:relative

。我希望它是一个可重用的组件，所以我希望能够做到这一点，而不需要知道任何关于父级（id、类等）的信息。在这里，向自定义组件的父级添加样式属性的最佳方法是什么

这就是我的自定义组件当前的外观：

<template>
  <component
    class="custom-overlay"
    :style="overlayStyle"
    :is="type"
    v-if="value">
    <slot :style="overlayContentStyle">
    </slot>
  </component>
</template>

<script>
import { colorShiftHelpers } from '../../mixins/helpers'

export default {
  props: {
    value: {
      default: true,
      type: Boolean
    },
    dark: {
      default: false,
      type: Boolean
    },
    absolute: {
      default: false,
      type: Boolean
    },
    color: {
      default: 'rgb(23, 30, 38)',
      type: String
    },
    opacity: {
      default: 0.46,
      type: Number | String
    },
    type: {
      default: 'div',
      type: String
    },
    zIndex: {
      default: 5,
      type: Number | String
    }
  },
  mixins: [colorShiftHelpers],
  computed: {
    overlayStyle({ absolute, color, opacity, zIndex }) {
      return {
        position: absolute ? 'absolute' : 'fixed',
        background: this.addAlpha(color, opacity),
        'z-index': zIndex
      }
    }
  }
}
</script>

<style scoped>
.custom-overlay {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
</style>

从“../../mixins/helpers”导入{colorShiftHelpers}
导出默认值{
道具：{
价值：{
默认值：true，
类型：布尔型
},
黑暗：{
默认值：false，
类型：布尔型
},
绝对：{
默认值：false，
类型：布尔型
},
颜色：{
默认值：“rgb（23,30,38）”，
类型：字符串
},
不透明度：{
默认值：0.46，
类型：数字|字符串
},
类型：{
默认值：“div”，
类型：字符串
},
zIndex：{
默认值：5，
类型：数字|字符串
}
},
混音器：[色移器]，
计算：{
套印样式（{绝对、颜色、不透明度、zIndex}）{
返回{
位置：绝对？“绝对”：“固定”，
背景：此.addAlpha（颜色、不透明度），
“z索引”：zIndex
}
}
}
}
.自定义覆盖{
排名：0；
左：0；
身高：100%；
宽度：100%；
}

实现这一点有两种可能的方法：

带Vuex的设备

从单个状态变量控制所有样式

商店

state: {
  absolute: false;
}
mutations: {
  setAbsolute(state, value) {
    state.absolute = value  // Here value should be true or false
  }
}

家长

<template>
  <div :class="{relative: absolute}">
    <child-component
      :is-absolute="absolute"
    />
  </div>
</template>

<script>
  export default {
    computed: {
      absolute() {
        return this$store.state.absolute
      }
    }
  }
</script>

无论何时你想改变，只要打电话就行了

  $store.commit('switchAbsolute')

如果要使用第一种方法手动设置值，请执行以下操作

  $store.commit('setAbsolute', [the value you want absolute to be])

绝对值作为父对象上的计算属性接收，从中可以控制父对象的样式，并将相同的值作为道具传递给子对象。注意条件类绑定，.relative类应该将位置设置为relative

有观察者和事件

下一个逻辑是：在子组件上，每当道具更改时，您都会发出一个事件，并处理父组件上的事件以更改其样式：

儿童

props: {
  absolute: {
    type: Boolean,
    default: false
  }
},
watch: {
  absolute: function(newVal, oldVal) {
    if (newVal === true) {
      this.$emit('childIsAbsolute')
    }
  }
}

在父级上*

<template>
  <div :styles="relativePosition">
    <child-component @childIsAbsolute="handleChange($event)" 
     :absolute="absolute"
    />
  </div>
</template>
<scrip>
  export default {
    data() {
      relative: false;
      absolute: false
    },
    methods: {
      handleChange(event) {
        this.relative = event //here event is true or false, depending  
        on the value of the child's prop, emited from the watcher
      }
    },
    computed: {
      relativePosition() {
        return `position: ${this.relative ? 'relative' : 'static'}`
      }
    }
  }
</script>

导出默认值{
数据（）{
相对：假；
绝对值：假
},
方法：{
手变（活动）{
this.relative=event//此处事件为真或假，具体取决于
关于儿童道具的价值，由观察者发出
}
},
计算：{
相对位置（）{
返回'position:${this.relative？'relative'：'static'}`
}
}
}

我们在这里所做的是：

为孩子设置一个道具绝对值，我们观察它在变化时发出一个事件，该事件将道具的新值发送给家长，我们对该事件做出反应，并根据新值改变样式（如果孩子是绝对值，则为true；如果不是，则为false）。

---

我真的不知道你在哪里处理这个道具的值，在这个例子中，我说没有必要用事件来处理它，因为我们实际上有我们想要在父对象中做出反应的值，但我真的不知道你从哪里发送它。

正如David Weldon在我的问题评论中所说的，我试图实现什么（当子组件的道具为x时，让子组件操纵父组件的样式）在干净的编码实践中实际上是不可取的。他说得更好，所以我将他的评论粘贴在这里：

---

通常，如果代码库的子单元（在本例中） 案例组件）具有明确的关系。您需要的解决方案是 隐式关系-将组件C添加到组件C的行为 P、 将改变P。想象一年后，你将P转换为模态，然后 由于C的行为，它突然中断 只需添加位置：相对于P，带有注释，或者添加一个类，如 o-container到P，其中o-container是一个可重用的CSS对象类，具有 在你的应用程序中有一个明确的目的

我最后做的只是创建一个可重用的css类并将其添加到父类中，而不是让子组件操纵父组件的样式

.relative {
    position: relative;
}

---

我不建议为此使用vuex状态-正如MattAft在评论中所指出的那样。

除非您在许多地方使用该组件，否则我不会这样做。这不仅是一种代码气味，如果父级不是以

相对的

的方式定位，也会有问题。好的-谢谢您的建议。您能解释一下是什么吗y这样做是不好的做法（例如，为什么它是代码气味？），以及您建议改为做什么？一般来说，如果它的子单元（在本例中是组件），代码库更容易维护有明确的关系。你想要的解决方案是一个隐含的关系-将组件C添加到组件P的行为将改变P。想象一下，一年后，你将P转换为一个模态，突然它因为C的行为而中断。一个明确的解决方案就是向P添加

position:relative

，并添加注释，或者添加一个类o-container到P，其中

o-container

是一个可重用的CSS对象类，在你的应用程序中有一个明确的用途。你设置它的任何方法都会很混乱，但另一种方法可能是将父对象作为一个插槽传递到这个组件中，这样你就可以从这里修改这两种样式。PS，你很可能不想这样做在vuex中设置它，以防您在同一屏幕上有多个组件，并且不希望其中一个组件改变所有其他家长。（除非这是您的目标）@David Weldon谢谢-这就是我最后做的，为家长添加了一个可重复使用的类。您所说的很有意义。作为一个自学和再培训的学生

.relative {
    position: relative;
}