Vue模板无法引用插槽props，出现disabled属性未定义警告

你遇到的警告是因为插槽props的作用域仅限于插槽内容内部，你却在<MenuItem>组件标签的:class绑定里直接使用了插槽解构出来的disabled——这个位置属于组件标签本身，无法访问插槽作用域里的变量，Vue会默认去当前组件实例上找disabled，找不到就弹出警告。

方案一：复用父组件的变量（更简洁） #

既然你已经给<MenuItem>传了:disabled="true"，可以在父组件里把这个值存成变量，同时用来绑定组件props和类名：

// Usage
<script setup lang="ts">
const isDisabled = true
</script>

<template>
  <MenuItem
    :disabled="isDisabled"
    :class="{ 'bg-slate-400 text-white': isDisabled }"
  >
    Item 1
  </MenuItem>
</template>

方案二：把类绑定移到插槽内容内部 #

如果必须依赖插槽传递的disabled（比如组件内部可能会修改这个值后再传给插槽），就把类绑定放到插槽内容的根元素上，这样就能访问到插槽props了：

// Usage
<script setup lang="ts">
</script>

<template>
  <MenuItem
    :disabled="true"
    v-slot="{ disabled }"
  >
    <div :class="{ 'bg-slate-400 text-white': disabled }">
      Item 1
    </div>
  </MenuItem>
</template>

你的MenuItem组件实现是没问题的，已经正确把disabled作为插槽props传递了，只是使用的时候搞错了插槽props的作用域范围——插槽props只能在<MenuItem>标签内部的插槽内容里使用，组件标签本身的属性绑定不属于插槽作用域，所以访问不到。

内容的提问来源于stack exchange，提问作者fsdevland