Vue.js 默认槽子组件的显示状态动态控制：3 种实用方法

2024-04-11 02:12:59

在 Vue.js 中动态控制默认槽子组件的显示状态

简介

在 Vue.js 中，容器组件需要控制默认槽中数量未知的子组件的显示状态。子组件需要持有属性或某种方式让容器组件识别它们。本文将探讨在 Vue.js 中使用三种方法动态更改默认槽中某个子组件的 display 属性。

方法 1: 使用 Provide/Inject API

Provide/Inject API 允许组件在祖先和后代组件之间传递数据。在容器组件中，我们可以使用 provide 来提供一个用于标识子组件的对象。在子组件中，可以使用 inject 来注入该对象并根据其值更新 display 属性。

代码示例：

Container.vue

// 容器组件
<template>
  <slot />
</template>

<script>
import { provide, inject } from 'vue'

export default {
  setup() {
    const showChildA = ref(true)
    provide('showChildA', showChildA)

    return {
      showChildA
    }
  }
}
</script>

ChildA.vue

// 子组件 A
<template>
  <div v-if="showChildA">
    ChildA
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const showChildA = inject('showChildA')

    return {
      showChildA
    }
  }
}
</script>

方法 2: 使用自定义事件

自定义事件 允许组件之间通信。在容器组件中，我们可以定义一个自定义事件来通知子组件更改其显示状态。在子组件中，监听该事件并根据接收到的数据更新 display 属性。

代码示例：

Container.vue

// 容器组件
<template>
  <button @click="toggleChildA">Toggle Child A</button>
  <slot />
</template>

<script>
export default {
  setup() {
    const showChildA = ref(true)

    const toggleChildA = () => {
      showChildA.value = !showChildA.value
      this.$emit('toggle-child-a', showChildA.value)
    }

    return {
      showChildA,
      toggleChildA
    }
  }
}
</script>

ChildA.vue

// 子组件 A
<template>
  <div v-if="showChildA">
    ChildA
  </div>
</template>

<script>
export default {
  setup() {
    const showChildA = ref(true)

    const toggleChildA = (value) => {
      showChildA.value = value
    }

    return {
      showChildA,
      toggleChildA
    }
  },
  created() {
    this.$on('toggle-child-a', toggleChildA)
  }
}
</script>

方法 3: 使用 $attrs

**attrs** 属性包含子组件的所有属性。在容器组件中，可以使用 `attrs来访问子组件的属性。然后，根据这些属性来确定需要更改哪个子组件的display` 属性。

代码示例：

Container.vue

// 容器组件
<template>
  <slot />
</template>

<script>
export default {
  setup() {
    const showChildA = ref(true)

    const changeChildDisplay = (child) => {
      if (this.$attrs[child] === 'child a') {
        showChildA.value = !showChildA.value
      }
    }

    return {
      showChildA,
      changeChildDisplay
    }
  }
}
</script>

ChildA.vue

// 子组件 A
<template>
  <div v-if="showChildA">
    ChildA
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const showChildA = inject('showChildA')

    return {
      showChildA
    }
  }
}
</script>