Vue中如何根据父组件的网格/列表切换修改子组件样式？

要实现根据TestLayout传递的listView状态给Card组件添加动态类名，核心是通过作用域插槽传递状态，再在Card组件中接收并应用动态类，具体步骤如下：

1. 确保TestLayout通过作用域插槽暴露listView状态 #

首先确认TestLayout组件的插槽是作用域插槽，将内部的listView状态传递给父组件（Home.vue）：

<!-- TestLayout.vue -->
<template>
  <div>
    <!-- 视图切换按钮 -->
    <button @click="listView = !listView">切换视图</button>
    <!-- 作用域插槽，暴露listView状态 -->
    <slot :listView="listView" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const listView = ref(false) // 初始为网格视图
</script>

2. 在Home.vue中接收插槽状态并传递给Card组件 #

在Home.vue中通过v-slot接收TestLayout传递的listView，再将其作为props传给每个Card组件：

<!-- Home.vue -->
<template>
  <TestLayout>
    <!-- 接收作用域插槽的listView状态 -->
    <template v-slot="{ listView }">
      <!-- 遍历渲染Card，传递isList prop -->
      <Card 
        v-for="cardItem in cardList" 
        :key="cardItem.id"
        :is-list="listView"
        :card-item="cardItem"
      />
    </template>
  </TestLayout>
</template>

<script setup>
import TestLayout from './TestLayout.vue'
import Card from './Card.vue'

const cardList = ref([
  // 卡片数据示例
  { id: 1, title: '卡片1' },
  { id: 2, title: '卡片2' }
])
</script>

3. 在Card组件中接收状态并绑定动态类 #

在Card组件中定义isList props，然后在根元素上使用动态类绑定实现样式切换：

<!-- Card.vue -->
<template>
  <div 
    :class="[
      // 根据isList切换深色模式背景
      isList ? 'dark:bg-midnight' : 'dark:bg-red-300',
      // 固定通用类
      'min-h-80 w-full bg-gray-50 shadow-xl rounded-md flex flex-col'
    ]"
  >
    <h3>{{ cardItem.title }}</h3>
    <!-- 其他卡片内容 -->
  </div>
</template>

<script setup>
const props = defineProps({
  isList: {
    type: Boolean,
    required: true
  },
  cardItem: {
    type: Object,
    required: true
  }
})
</script>

简化场景：如果Card不是独立组件 #

如果Card是直接写在Home.vue的插槽内的元素，无需单独组件，可直接在元素上使用listView状态：

<!-- Home.vue -->
<template>
  <TestLayout>
    <template v-slot="{ listView }">
      <div 
        v-for="item in cardList" 
        :key="item.id"
        :class="[
          listView ? 'dark:bg-midnight' : 'dark:bg-red-300',
          'min-h-80 w-full bg-gray-50 shadow-xl rounded-md flex flex-col'
        ]"
      >
        <h3>{{ item.title }}</h3>
      </div>
    </template>
  </TestLayout>
</template>

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