【小程序分包之间 相互引用组件】

业务场景:

有两个业务分包,分别为:分包1: pages_crm 分包2: pages_app,分包1需要引用分包2的组件

方案一:将包2的组件 放到主包里作为公共组件 供两个包使用;但是代码涉及范围大,不好转移,而且容易造成主包体积大于2M 无法发布

方案二:分包异步化 包1异步引入包二的组件

分包异步化:一般我们从主包跳到分包或者分包跳分包,都是跳转页面,在跳的时候才会去加载分包,但是如果在一个分包里想要引入另一个分包的组件或者接口的时候,这个时候就没办法正常使用了,因为另一个分包不知道在什么时机去加载。分包异步化则解决了这个问题。

分包1pages_crm 的pages_crm/leads/components/tabsAbout tabsAbout.vue组件 中
目录结构:
在这里插入图片描述

引用分包2的组件pages_app/components/tabsAbout/ModuleRelevance.vue

第一步:项目的pages.json配置文件分包一"root": "pages_crm"中配置:

"subPackages": [
    {
         "root": "pages_crm",
         "pages": [
             		{
                      "path": "leads/detail", // 线索详情
                      "style": {
                        "navigationStyle": "custom",
                        "navigationBarTextStyle": "white"
                      }
                    },
                   //------------------------新增的代码!!!-----------------------
                    {
                      "path": "leads/components/tabsAbout", // 线索详情-相关信息
                      "style": {
                                "mp-weixin":{
                                    "componentPlaceholder":{
                                            "module-relevance":"view"  //占位组件
                                    }
                                }
                      }
                    }
             	  //------------------------新增的代码!!!------------------------
         ]
    }

占位组件一定要配置 因为是异步加载,不设置占位组件,会报错,找不到组件!

第二步:分包1pages_crm组件中引入、注册、使用分包2的组件
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值