Vue2开发：能否在AccordionItem插槽子元素中访问传入的item-title变量

核心结论 #

你当前编写的代码片段里，无法在AccordionItem包裹的直接子元素中，直接访问到绑定传入的item-title变量值。

访问失败的原因 #

• Vue模板有明确的编译作用域规则：某段模板内容，只会在它被定义时所处的组件作用域下查找变量。
• 你写的<div v-if="item-title=='Ann'">是写在父组件模板里的插槽内容，Vue编译这段判断逻辑时，只会去当前父组件的实例数据、计算属性、方法里匹配名为item-title的变量，根本不会查询子组件AccordionItem内部的prop值。
• 实际运行时，只要父组件没有自己声明对应的变量（JS合法标识符应为itemTitle，HTML模板里写的连字符会被框架自动做解析转换），这个v-if判断的取值永远是undefined，完全匹配不到你传入的Ann值。
• 你通过:item-title="someName"传给AccordionItem的值，只会作为AccordionItem组件实例的内部props存在，默认状态下不会对外暴露给插槽内容访问。

插槽访问子组件prop的正确实现方式 #

如果确实需要在传入AccordionItem的自定义内容里，拿到AccordionItem自身的item-title值，需要通过Vue2的作用域插槽语法，由AccordionItem组件主动把需要暴露的值传递给插槽：

1. 第一步：在AccordionItem组件的内部模板里，给slot标签绑定需要对外暴露的属性

   <!-- AccordionItem 组件内部模板 -->
   <div class="accordion-item-wrapper">
     <!-- 把自身的itemTitle prop暴露给插槽 -->
     <slot :custom-item-title="itemTitle"></slot>
   </div>
   

2. 第二步：父组件调用时，通过插槽作用域对象拿到暴露的值
   • 兼容所有Vue2版本的写法：

   <AccordionItem :item-title="someName">
     <template slot-scope="slotProps">
       <div v-if="slotProps.customItemTitle == 'Ann'"></div>
     </template>
   </AccordionItem>
   

   • Vue2.6及以上版本支持的更简洁写法：

   <AccordionItem :item-title="someName">
     <template #default="slotProps">
       <div v-if="slotProps.customItemTitle == 'Ann'"></div>
     </template>
   </AccordionItem>
   

注意事项 #

• JS语法不支持连字符作为变量名，哪怕在slot上传值时写了:custom-item-title，在插槽作用域里取这个值时，要么取自动转换后的驼峰命名customItemTitle，要么用中括号语法slotProps['custom-item-title']获取，直接写slotProps.custom-item-title会触发语法错误。
• 所有直接写在组件标签内部的普通插槽内容，都只能访问父组件自身的作用域数据，不存在“自动穿透到子组件获取prop”的内置机制。

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