关于Vue $attrs is readonly 或者 xxx is readonly.报错记录

已于 2022-04-12 00:54:36 修改
阅读量5.7k 收藏 4
点赞数
分类专栏： 前端 文章标签： vue
于 2022-04-12 00:51:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010499872/article/details/124113636
版权

百度了一下解决方案都是说要该vue版本和vue组件编译插件的脚本,但是好像效果不是很好,局限性还很高.

查了一下原因

是因为存在了多个(不同版本?)的vue实例导致的.原文如下

javascript - [Vue warn]: $attrs is readonly. [Vue warn]: $listeners is readonly - Stack Overflowhttps://stackoverflow.com/questions/52213260/vue-warn-attrs-is-readonly-vue-warn-listeners-is-readonly

当引入第三方库里面有 import Vue from 'vue';时,就可能会造成这个情况,常见的就有elementUI等

解决方案是在 webpack.renderer.config.js 中的模块白名单添加冲突的组件or模块即可

操作如下:

BlmVay
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - 解决安装引入 WangEditor V5 富文本编辑器后控制台报错（Nuxt.js 项目同样适用）：$attrs is readonly 、 $listeners is readonly
王佳斌
09-23 3171
解决 wangEditor 5 富文本编辑器引入后一上来就出现报错，vue2.js nuxt.js $attrs is readonly / $listeners is readonly / wangEditor 控制台一串报错，wangeditor富文本 控制台报错"无效的节点选择器" 引入wangeditor5运行报错，elementUI Date-picker 点击报“attrs is readonly”，引入wangEditor新版本报错正解如。iview Date-picker 点击报“attrs
Vue vm.$attrs使用场景详解
10-15
主要介绍了vm.$attrs使用场景详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
已解决】wangEditor报错$attrs is readonly.$listeners is readonly
0 error(s), 0 warning(s)
02-21 436
已解决】wangEditor报错$attrs is readonly.$listeners is readonly
[Vue warn]: $attrs is readonly. $listeners is readonly.
西格玛猫
10-18 5309
项目报错 [Vue warn]: $attrs is readonly. [Vue warn]: $listeners is readonly. 百度后发现应该是加载了多个Vue实例导致。 解决方法 vue.config.js chainWebpack: config => { config.resolve.alias .set('@', resolve('src')).set('vue', resolve('./node_modules/vue')) }, ...
解决Vue 引用Element-ui DateTimePicker 报$attrs is readonly / $listeners is readonly的问题
技术无止境
07-28 1177
页面中使用DateTimePicker时，当点击打开时候，报错$attrsisreadonly/$listenersisreadonly。wordpress的项目，使用了wpackio（webpack）来对前端jscss进行打包。wpackio（webpack）中为Vue配置别名。在当前页面的js中，引用vue的时候为。...
electron-vue项目使用elementUI组件报错$attrs is readonly
javaScript_go的博客
07-29 1459
electron-vue项目使用elementUI组件报错$attrs is readonly 在electron项目使用element一直报错 [Vue warn]: $attrs is readonly. 百度了很多刚开始以为是vue版本的问题，也试了很多版本还是报错，最后才发现是webpack配置问题 在webpack.renderer.config.js中添加上’element-ui’即可！ let whiteListedModules = ['vue','element-ui'] 头都搞大了
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
10-15
主要介绍了Vue2.4+新增属性.sync、$attrs、$listeners的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
$attrs is readonly $listenners is readonly 报错解决方法
m0_65450343的博客
07-15 1877
$attrs is readonly $listenners is readonly 报错解决方法
解决问题 $attrs is readonly $listener is readonly
m0_57809042的博客
03-03 838
遇到问题：$attrs is readonly $listener is readonly。解决方法：^vue 和 ^vue-template-compiler前面的^去掉，如下图。改完之后，打开终端，依次输入。最后重启即可，报错消失。
vue踩坑记录:[Vue warn]: $attrs is readonly.
热门推荐
dblq10649的博客
03-29 1万+
今天在用element-ui的DatePicker日期选择器的时候，发现每当点击一次这个组件，控制台就会报警告`[Vue warn]: $attrs is readonly`，但是也不影响实际操作效果。网上搜了一圈后，发现是使用的vue与vue-tempalte-compiler的版本不一致造成的。当时使用的vue是最新版本2.6.10，而vue-template-compiler版...
报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-30 400
举个例子，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错误【高效】极致简化vuex.js（仅需6行代码），让快速敏捷开发不是梦！
12.（vue3.x+vite）组件间通信方式之$attrs与$listeners.rar
09-19
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
Vue为什么要谨慎使用$attrs与$listeners
10-14
主要介绍了Vue为什么要谨慎使用$attrs与$listeners，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue v2.4中新增的$attrs及$listeners属性使用教程
11-29
Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件...
#这是一篇关于 LabVIEW 介绍说明、使用技巧和优缺点对文章
最新发布
04-26
labview
重庆大学数字电子技术试题.pdf
04-26
重庆大学期末考试试卷，重大期末考试试题，试题及答案
重庆大学2012电磁场考题（A）参考答案及评分标准.pdf
04-26
重庆大学期末考试试卷，重大期末考试试题，试题及答案
vue 使用wangeditor $attrs is readonly.
08-04
在Vue中，$attrs是一个只读属性，它用于获取父组件传递给子组件的非props属性。$attrs主要用于在子组件中将传递给它的所有属性传递给其他子组件或者原生HTML元素。它的只读属性意味着我们不能直接对其进行修改。 使用wangeditor插件时，我们可能会将其作为一个子组件来使用。当我们想要将$attrs传递给wangeditor组件时，我们不能直接修改$attrs。我们可以通过创建一个新的变量，将$attrs的值复制给这个变量，然后再将该变量传递给wangeditor组件。 例如，我们可以在父组件中创建一个名为editorAttrs的变量，并将$attrs的值复制给它： ```javascript <template> <wangeditor :attrs="editorAttrs"></wangeditor> </template> <script> export default { data() { return { editorAttrs: {}, }; }, mounted() { this.editorAttrs = this.$attrs; // 将$attrs的值复制给editorAttrs }, }; </script> ``` 通过这种方式，在wangeditor组件中，我们可以获取到父组件传递给editorAttrs的所有属性。需要注意的是，我们只能通过此方法将$attrs传递给wangeditor组件，并且我们不能对editorAttrs进行直接修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值