当前位置: 首页 > news >正文

Vue组件库出现$listeners is readonly等错误的原因及预防方法

本文主要是面向写组件库的人士,而不是组件库的使用人士。

出现原因

根本原因是因为组件库的package.json中
dependencies包含了vue包,然后导致最后打包出来的组件库也包含vue包
然后和引用这个组件库的项目中的vue发生冲突。

举个例子,project1是vue组件库,package.json中dependencies包含了"vue":“2.6.1”
project1打包出了"project1":“0.0.1” 这个组件包
然后project2是项目代码,package.json中dependencies包含了"vue":“2.6.1"和"project1”:“0.0.1”
这样,在使用project1的组件时就会出现readonly错误

预防方法

这给我们写组件库一个启示,千万不要在package.json中dependencies包含了"vue"包

特殊场合

但有两种情况,你会在组件库中不自觉用到Vue对象
1.利用Vue的templateCompile,即模板编译器
2.利用Vue.component进行全局组件注册
首先第一点很简单,参考一下其他开源Vue库的实现,例如elementUI
在这里插入图片描述
在这里插入图片描述

发现引用了@vue/component-compiler-utils包和vue-template-compiler,然后查看用法
在这里插入图片描述在这里插入图片描述
这样就实现了不引入vue包的情况下,使用模板编译功能

2.如果是需要全局注册的情况就比较麻烦了,
例如组件库包含某个函数,需要全局注册组件

import Vue from "vue";
function test(name,component){Vue.component(name,component)
}

一般是像上面这么写的因此就不得不引入vue包。

我这的解决方法比较差,但也可以解决这个问题,如果各位看官有更好的方法求指导
我是这么处理的

import config from "./config.js"
function test(name,component){config.Vue.component(name,component)
}

config.js

export default {};

即,通过config.js这个空对象,
然后在引入组件包时,需要先对config.js对象进行vue注入
以下时引用包project1的时候添加config.js

import Vue from 'vue';
import {config}from 'project1';
config.Vue=Vue;

然后main.js

import './config.js';
import project1 from "project1";

当然,不清楚有没有Vue.component单独使用的vue的util库,如果有的话求推荐

http://www.lryc.cn/news/35074.html

相关文章:

  • lsusb
  • Allegro如何在PCB中添加层面操作指导
  • 淘宝widget链路方案总结
  • c++指针
  • Qt 贴图实现方向控制盘
  • 建模杂谈系列211 ADBS的取数模式以及衔接
  • 易基因:RRBS揭示晚年锻炼可以减缓骨骼肌表观遗传衰老(甲基化年龄)|新研究
  • JVM的基本知识
  • STM32移植FreeRTOS操作系统
  • 【专项训练】泛型递归、树的递归
  • React18 setState是同步还是异步?
  • Kafka消费者 TCP管理
  • 软考高级备考哪一个类型好些?
  • 2023 HBU 天梯赛第一次测试 题目集
  • 华为OD机试题,用 Java 解【子序列长度】问题
  • 内网环境解决SSL证书问题
  • 数据分析方法01对比分析法
  • 基于SMOKE多模式排放清单处理技术及EDGAR/MEIC清单制作与VOCs排放量核算
  • CSS流动布局-页面自适应
  • 3.Elasticsearch初步进阶
  • 优思学院|六西格玛管理的核心理念是什么?
  • 第十七节 多态
  • [vue]提供一种网站底部备案号样式代码
  • python第四天作业~函数练习
  • linux安装influxdb-rpmyum方式
  • 死锁
  • C++基础了解-05-C++常量
  • 深度学习笔记-2.自动梯度问题
  • 一文读懂倒排序索引涉及的核心概念
  • Java基础算法题