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。
