Vue 3中满足条件时如何在兄弟组件间传递样式？

首先明确：Vue中兄弟组件无法直接传递数据，必须通过父组件中转，这是符合Vue数据驱动思想的规范做法，不推荐用原生JS操作DOM（比如你之前的document.querySelector），因为会破坏组件的封装性和可维护性。

下面是具体实现步骤：

1. 父组件统一管理共享状态 #

在父组件里定义一个状态（比如isInputFilled），用来标记输入框内容是否非空。同时接收第一个子组件的输入变化事件，再把这个状态传给第二个子组件。

<!-- Parent.vue 父组件 -->
<template>
  <div>
    <!-- 第一个子组件：带输入框的组件 -->
    <InputComponent @input-change="handleInputChange" />
    
    <!-- 第二个子组件：需要修改样式的组件 -->
    <SecondaryContentComponent :isInputFilled="isInputFilled" />
  </div>
</template>

<script>
import InputComponent from './InputComponent.vue'
import SecondaryContentComponent from './SecondaryContentComponent.vue'

export default {
  components: {
    InputComponent,
    SecondaryContentComponent
  },
  data() {
    return {
      isInputFilled: false
    }
  },
  methods: {
    handleInputChange(inputValue) {
      // 根据输入内容长度更新状态
      this.isInputFilled = inputValue.length > 0
    }
  }
}
</script>

2. 输入框子组件（InputComponent） #

把输入框的变化通过$emit通知父组件，同时可以关联你提到的<ais-state-results>组件的显示条件：

<!-- InputComponent.vue -->
<template>
  <div>
    <input v-model="input" @input="notifyParent" placeholder="输入内容..." />
    <!-- 根据输入状态控制组件显示 -->
    <ais-state-results v-if="input.length > 0" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: ""
    }
  },
  methods: {
    notifyParent() {
      // 向父组件发送输入变化事件
      this.$emit('input-change', this.input)
    }
  }
}
</script>

3. 样式目标子组件（SecondaryContentComponent） #

通过props接收父组件的状态，用Vue的动态样式绑定来设置marginTop：

<!-- SecondaryContentComponent.vue -->
<template>
  <!-- 动态绑定style，根据isInputFilled的值切换样式 -->
  <div 
    class="secondary-content"
    :style="{ marginTop: isInputFilled ? '-20px' : '0' }"
  >
    <TheWordOfTheDay />
    <SuggestTranslationForm />
  </div>
</template>

<script>
export default {
  // 声明接收的props
  props: {
    isInputFilled: {
      type: Boolean,
      default: false
    }
  }
}
</script>

为什么不用原生DOM操作？ #

• 违背Vue的数据驱动核心思想，状态和DOM分离才是Vue的优势
• 组件复用性差：如果页面中有多个secondary-content，原生选择器会误操作其他元素
• 难以维护：后续修改状态逻辑时，DOM操作的代码容易被遗漏

内容的提问来源于stack exchange，提问作者Harri