Vue3集成vue-slick-carousel报错：$scopedSlots未定义求助

问题根源 #

报错Property "$scopedSlots" was accessed during render but is not defined on instance的核心原因是：你当前使用的是Vue3，但引入的轮播组件库是为Vue2开发的。$scopedSlots是Vue2特有的API，Vue3中已将其与普通插槽合并为$slots，因此Vue2组件在Vue3环境中运行时会找不到该属性，引发报错。你更换其他轮播库也出现相同问题，进一步说明是组件库与Vue3版本不兼容导致的。

解决步骤 #

1. 确认vue-slick-carousel的版本兼容性 #

首先检查你安装的vue-slick-carousel是否支持Vue3：

• 查看package.json中的版本号，若版本低于2.x，大概率只支持Vue2；
• 安装支持Vue3的最新版本：

  npm install vue-slick-carousel@latest
  # 或使用yarn
  yarn add vue-slick-carousel@latest
  

• 同时删除app.js中无用的import VueCarousel from 'vue-carousel';语句，避免混淆。

2. 若组件库仅支持Vue2，启用Vue3兼容层 #

如果必须使用仅支持Vue2的组件库，可通过@vue/compat兼容层让Vue3兼容Vue2组件：

1. 安装兼容层：

   npm install @vue/compat
   

2. 修改app.js配置，改用兼容模式创建应用：

   import './bootstrap';
   import { createApp } from '@vue/compat';
   
   const app = createApp({});
   
   import VueSlickCarouselComponent from './components/VueSlickCarouselComponent.vue'
   app.component('vue-slick-carousel-component', VueSlickCarouselComponent);
   app.mount('#carousel');
   

3. 在项目根目录的package.json中添加兼容配置：

   "vue": {
     "compilerOptions": {
       "compatConfig": {
         "MODE": 2
       }
     }
   }
   

3. 更换为Vue3原生支持的轮播库 #

如果上述方法仍无法解决，建议直接使用专为Vue3开发的轮播库，比如vue3-carousel：

1. 安装库：

   npm install vue3-carousel
   

2. 修改组件代码：

   <template>
     <div>
       <Carousel>
         <Slide>
           <div>1</div>
         </Slide>
         <Slide>
           <div>2</div>
         </Slide>
         <Slide>
           <div>3</div>
         </Slide>
         <Slide>
           <div>4</div>
         </Slide>
         <template #addons>
           <Navigation />
           <Pagination />
         </template>
       </Carousel>
     </div>
   </template>
   
   <script>
   import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
   import 'vue3-carousel/dist/carousel.css';
   
   export default {
     name: 'MyComponent',
     components: { Carousel, Slide, Pagination, Navigation },
   }
   </script>
   

内容的提问来源于stack exchange，提问作者james.borg