[Vue warn]: $attrs is readonly，[Vue warn]: $listeners is readonly；

最新推荐文章于 2024-04-12 13:04:15 发布
最新推荐文章于 2024-04-12 13:04:15 发布
阅读量4.3k 收藏 2
点赞数 4
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QiGary/article/details/112573056
版权

 原因1：vue与vue-tempalte-compiler的版本不一致

解决方案：重新安装vue-tempalte-compiler，或者忽略，此问题只是出现在本地环境，发布之后，此问题不复存在。

  1. 卸载vue-template-compiler    npm uninstall vue-template-compiler
  2. 安装  npm install vue-template-compiler @报错中提示的版本

 原因2：重复引入 new vue()（可能在main.js页面和index.html页面重复引入）

解决方案：移除多余的引入

QiGary
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue vm.$attrs使用场景详解
10-15
`vm.$attrs` 是Vue实例的一个属性，它包含了父作用域中未被识别（即未声明为prop）的绑定属性，除了`class`和`style`。当一个组件没有声明任何prop时，`vm.$attrs`会包含所有父作用域的绑定属性（除了`class`和`...
Vue组件库出现$listeners is readonly等错误的原因及预防方法
JokerSoulClub的博客
03-08 2697
根本原因是因为组件库的package.json中dependencies包含了vue包，然后导致最后打包出来的组件库也包含vue包然后和引用这个组件库的项目中的vue发生冲突。举个例子，project1是vue组件库，package.json中dependencies包含了"vue":“2.6.1”project1打包出了"project1":“0.0.1” 这个组件包。
[Vue warn]: $attrs is readonly. $listeners is readonly.
西格玛猫
10-18 5373
项目报错 [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 warn]: $attrs is readonly. $listeners is readonly.
最新发布
weixin_45389051的博客
04-12 688
可能是加载了多个Vue实例导致，解决方法。然后重新运行项目即可。
解决Vue 引用Element-ui DateTimePicker 报$attrs is readonly / $listeners is readonly的问题
技术无止境
07-28 1242
页面中使用DateTimePicker时，当点击打开时候，报错$attrsisreadonly/$listenersisreadonly。wordpress的项目，使用了wpackio（webpack）来对前端jscss进行打包。wpackio（webpack）中为Vue配置别名。在当前页面的js中，引用vue的时候为。...
[Vue warn]: $attrs is readonly.[Vue warn]: $listeners is readonly.重复引用Vue
weixin_63203565的博客
03-10 1817
【代码】[Vue warn]: $attrs is readonly.[Vue warn]: $listeners is readonly.重复引用Vue。
报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-30 755
举个例子，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行代码），让快速敏捷开发不是梦！
关于Vue $attrs is readonly 或者 xxx is readonly.报错记录
u010499872的博客
04-12 5834
vue $attrs is readonly $listeners is readonly.
Vue组件通信$attrs、$listeners实现原理解析
10-14
在这些机制中，`$attrs` 和 `$listeners` 是一种相对隐式且灵活的通信方式，它们在处理非 prop 特性和事件时尤其有用。 `$attrs` 是 Vue 中的一个对象，它包含了父组件中除 `class` 和 `style` 之外的所有未被声明...
Vue为什么要谨慎使用$attrs与$listeners
10-14
主要介绍了Vue为什么要谨慎使用$attrs与$listeners，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue v2.4中新增的$attrs及$listeners属性使用教程
11-29
Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件...
解决electron-vue+element报错$attrs is readonly和$listeners is readonly问题
一片天空
12-05 543
这篇是记录我在electron-vue中使用elementUi插件一直报错的问题，终于最后在这里得到了解决。
Vue - 解决安装引入 WangEditor V5 富文本编辑器后控制台报错（Nuxt.js 项目同样适用）：$attrs is readonly 、 $listeners is readonly
王佳斌
09-23 3385
解决 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踩坑记录:[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 and $attrs is readonly “Avoid mutating a prop directly”
为啥不能换名字的博客
04-09 5711
warn $listeners and $attrs is readonly 就是报这样的错误 原因：vue和elementUI的版本不匹配 解决办法：升级vue和elementUI的版本就好了
[Vue warn]: $attrs is readonly；Webpack externals 配置
weixin_34242509的博客
04-16 3481
项目报错 [Vue warn]: $attrs is readonly. [Vue warn]: $listeners is readonly. 复制代码原因 重复引入 Vue 解决方法 在webpack中配置上： externals: { vue: { root: 'Vue', commonjs: 'vue', commonjs2: 'vue', ...
$attrs is readonly $listenners is readonly 报错解决方法
m0_65450343的博客
07-15 1929
$attrs is readonly $listenners is readonly 报错解决方法
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、付费专栏及课程。

余额充值