Vue3 插槽的使用技巧：判断父组件是否传递插槽内容

2024-01-02 12:16:12

判断父组件插槽内容是否存在：多种方法

在 Vue.js 中，插槽是一种强大的工具，它允许组件在父组件中动态渲染内容。但是，有时我们需要判断父组件是否传递了插槽内容，以便显示不同的内容。本文将介绍五种方法来判断父组件是否传递了插槽内容：

1. 使用 v-if 指令

最简单的方法是使用 v-if 指令。v-if 指令接受一个布尔表达式的值，如果值为 true，则显示插槽内容；否则，显示默认内容。

<template>
  <div>
    <!-- 如果插槽内容存在，则显示插槽内容 -->
    <slot v-if="$slots.default"></slot>

    <!-- 否则显示默认内容 -->
    <p v-else>默认内容</p>
  </div>
</template>

2. 使用 v-for 指令

如果插槽内容是一个数组，我们可以使用 v-for 指令来遍历插槽内容。v-for 指令接受一个数组和一个别名作为参数，它将为数组中的每个元素渲染插槽内容。

<template>
  <div>
    <!-- 遍历插槽内容 -->
    <slot v-for="item in $slots.default" :item="item"></slot>
  </div>
</template>

3. 使用 render 函数

如果我们需要更灵活地控制插槽内容的显示，我们可以使用 render 函数。render 函数返回一个虚拟 DOM 节点树，它可以用来创建插槽内容。

export default {
  render() {
    // 如果插槽内容存在，则显示插槽内容
    if (this.$slots.default) {
      return this.$slots.default()
    }

    // 否则显示默认内容
    return <p>默认内容</p>
  }
}

4. 使用 scopedSlots

如果我们需要在插槽内容中使用父组件的数据，我们可以使用 scopedSlots。scopedSlots 允许我们在插槽内容中使用父组件提供的数据。

<template>
  <div>
    <!-- 使用 scopedSlots 来传递父组件的数据 -->
    <slot v-bind="$scopedSlots"></slot>
  </div>
</template>

5. 使用 provide 和 inject

如果我们需要在插槽内容中使用父组件的方法，我们可以使用 provide 和 inject。provide 允许父组件提供数据和方法，而 inject 允许子组件注入这些数据和方法。

// 父组件
export default {
  provide() {
    return {
      // 提供的方法
      myMethod() {
        // ...
      }
    }
  }
}

// 子组件
export default {
  inject: ['myMethod'],
  render() {
    // 使用父组件提供的方法
    return this.myMethod()
  }
}