Vue3中Vue-multiselect插槽失效问题求助

问题描述 #

我尝试在Vue3中复现Vue-multiselect文档中的示例，但无法正常运行。代码如下：

<multiselect 
  v-model="value" 
  :options="options" 
  :multiple="true" 
  :close-on-select="false" 
  :clear-on-select="false" 
  :preserve-search="true" 
  placeholder="Pick some" 
  label="name" 
  track-by="name" 
  :preselect-first="true">
  <template slot="selection" slot-scope="{ values, search, isOpen }">
    <span 
      class="multiselect__single" 
      v-if="values.length" 
      v-show="!isOpen">
        {{ values.length }} options selected
    </span>
  </template>
</multiselect>

文档说明v3.0.0版本与v2.x基本兼容，文档内容一致，但未提供针对Vue3插槽使用的示例或说明。我尝试将组件名从'multiselect'改为'VueMultiselect'，但问题仍未解决。组件的选择功能正常，但关闭下拉框后自定义模板不显示，仅显示默认标签。请问是我遗漏了相关配置，还是该特性尚未完全适配Vue3？

解决方案 #

问题出在Vue3的插槽语法变化上，Vue2的slot和slot-scope语法在Vue3中已被废弃，需改用Vue3的v-slot语法定义插槽。

修改后的代码如下：

<VueMultiselect 
  v-model="value" 
  :options="options" 
  :multiple="true" 
  :close-on-select="false" 
  :clear-on-select="false" 
  :preserve-search="true" 
  placeholder="Pick some" 
  label="name" 
  track-by="name" 
  :preselect-first="true">
  <!-- 使用Vue3的v-slot语法替代旧的slot和slot-scope -->
  <template v-slot:selection="{ values, search, isOpen }">
    <span 
      class="multiselect__single" 
      v-if="values.length" 
      v-show="!isOpen">
        {{ values.length }} options selected
    </span>
  </template>
</VueMultiselect>

关键说明 #

• Vue3不再支持slot属性和slot-scope属性，必须使用v-slot（或简写#，比如#selection="{ values, search, isOpen }"）来声明插槽并接收作用域参数
• 组件名需确认使用VueMultiselect，这是Vue3版本组件的正确注册名称
• 该特性已适配Vue3，只是官方文档未及时更新Vue3的插槽语法示例

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