---
url: /docs/guide/usage/linter/rules/vue/require-slots-as-functions.md
---

### What it does

Enforce properties of `$slots` to be used as functions.

### Why is this bad?

In Vue.js 3, `this.$slots.<name>` is a function (slot render function),
not an array of vnodes like in Vue.js 2. Treating slot properties as
values (e.g. `this.$slots.default.filter(...)`) breaks at runtime.

### Examples

Examples of **incorrect** code for this rule:

```vue
<script>
export default {
  render(h) {
    var children = this.$slots.default
    return h('div', children.filter(...))
  }
}
</script>
```

Examples of **correct** code for this rule:

```vue
<script>
export default {
  render(h) {
    var children = this.$slots.default();
    return h("div", children);
  },
};
</script>
```

## How to use

## Version

This rule was added in v1.67.0.

## References