Skip to content
← Back to rules

vue/require-slots-as-functions 正确性

作用

强制将 $slots 的属性作为函数使用。

为什么这不好?

在 Vue.js 3 中,this.$slots.<name> 是一个函数(插槽渲染函数), 而不是像 Vue.js 2 中那样的 vnode 数组。将插槽属性当作 值来处理(例如 this.$slots.default.filter(...))会在运行时出错。

示例

以下是此规则的错误代码示例:

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

以下是此规则的正确代码示例:

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

How to Use

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["vue"],
  "rules": {
    "vue/require-slots-as-functions": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["vue"],
  rules: {
    "vue/require-slots-as-functions": "error",
  },
});
bash
oxlint --deny vue/require-slots-as-functions --vue-plugin

版本

此规则新增于 v1.67.0。

参考资料