uni-app+vue3通过返回的数据中的某一类型进行条件判断多个组件中其中一个的显示与

uni-app+vue3通过返回的数据中的某一类型进行条件判断多个组件中其中一个的显示与隐藏

那只能 每歌数组都 循环判断一下

要根据返回数据中的某一类型进行条件判断并控制多个组件的显示与隐藏，可以在父组件中设置一个变量，将这个变量通过props传递给需要控制的子组件。

然后，在父组件中监听返回数据的变化，根据返回数据中的某一类型更新变量的值。在需要控制显示与隐藏的子组件中，可以通过v-if指令将该组件与这个变量绑定起来。当变量的值发生变化时，该组件的显示与隐藏也会随之变化。

示例代码如下：

<template>
  <div>
    <!-- 将变量通过 props 传递给子组件 -->
    <ChildComponent :showFlag="showFlag" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      showFlag: false, // 初始值为 false
      responseData: null, // 返回数据
    };
  },
  watch: {
    responseData(newData) {
      // 监听返回数据的变化
      if (newData.type === 'xxx') {
        // 根据返回数据中的某一类型更新变量的值
        this.showFlag = true;
      } else {
        this.showFlag = false;
      }
    },
  },
};
</script>

在子组件中，可以通过v-if指令将该组件与父组件中的showFlag变量绑定起来，实现根据变量的值控制该组件的显示与隐藏。

<template>
  <div v-if="showFlag">
    <!-- 显示内容 -->
  </div>
</template>

<script>
export default {
  props: {
    showFlag: Boolean, // 父组件传递的变量
  },
};
</script>