Vue中使用Vant优惠券组件,按需导入发现报错,说组件没有注册?Vant组件使用报错

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

Vue中使用Vant优惠券组件,按需导入发现报错,说组件没有注册?Vant组件使用报错_第1张图片

在使用Vant的优惠券组件的时候出现了该错误

我按照官方文档

  1. npm i vant -S安装
  2. npm i babel-plugin-import -D 安装插件
  3. 配置.babelrc
  4. 在main.js文件中按需引入组件
  5. import { CouponCell, CouponList } from 'vant'; Vue.use(CouponCell).use(CouponList);

然后它就提示我van-popup组件没有注册,原来是这个组件依赖于popup这个组件,官方文档却省略了这一步。

解决方案:

在main.js引用这个popup组件

import { Popup } from 'vant';

Vue.use(Popup);

所以最终是这样

import { CouponCell, CouponList } from 'vant';
Vue.use(CouponCell).use(CouponList);
import { Popup } from 'vant';
Vue.use(Popup);

但是这样组件还是无法正常使用,点击优惠券列表是无法进行弹出的,它还有个showList报错

解决方案:

在data return 中定义一个showList:false

你可能感兴趣的:(前端)