Vue 3 中插槽使用警告：“Slot 'default' 在渲染函数之外调用”的解决方法

2024-03-20 13:14:55

Vue 3 中使用插槽时的警告：“Slot 'default' 在渲染函数之外调用”

引言

在使用 Vue 3 中的插槽时，你可能遇到过一个常见的警告："Slot 'default' 在渲染函数之外调用：这将不会追踪插槽中使用的依赖项。请在渲染函数中调用插槽函数。" 理解此警告并了解解决方法至关重要，以确保你的 Vue 3 应用程序的正常运行。

理解警告

此警告表示你正在渲染函数之外调用插槽。这会导致无法追踪插槽中使用的依赖项，从而导致组件状态的变化无法正确反映在插槽内容中。换句话说，当组件状态发生变化时，插槽内容可能无法更新，从而导致 UI 不一致或错误。

解决方法

要解决此警告，你需要在渲染函数中调用插槽函数。以下是如何实现：

在 setup() 函数中存储插槽

首先，在父组件的 setup() 函数中，你需要将插槽存储在一个响应式数组中。

const slots = [
  h("div", { caption: "I am div 1" }, ["Div 1"]),
  h("div", { caption: "I am div 2" }, ["Div 2"])
];

在模板中使用 v-slot

接下来，在父组件的模板中，使用 v-slot 指令来调用插槽函数，并将其作为子组件的 props 传递。

<child-component>
  <template v-slot="{ slots }">
    <div v-for="slot in slots" :key="slot.caption">
      <slot :name="slot.caption" />
    </div>
  </template>
</child-component>

在子组件中使用插槽

最后，在子组件中，使用插槽函数来渲染插槽内容。
```
<div>
  <slot v-for="slot in slots" :name="slot.caption" />
</div>
```

通过将插槽函数调用移到渲染函数中，你将消除警告并确保插槽内容与组件状态保持同步。

示例

考虑以下示例：

// 父组件
<template>
  <child-component>
    <template v-slot="{ slots }">
      <div v-for="slot in slots" :key="slot.caption">
        <slot :name="slot.caption" />
      </div>
    </template>
  </child-component>
</template>

<script>
  export default {
    setup() {
      const slots = [
        h("div", { caption: "I am div 1" }, ["Div 1"]),
        h("div", { caption: "I am div 2" }, ["Div 2"])
      ];
      return () => h(ChildComponent, { slots });
    }
  };
</script>

// 子组件
<template>
  <div>
    <slot v-for="slot in slots" :name="slot.caption" />
  </div>
</template>
</script>