报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决?

代码也没有逻辑错误,但是报错

[Vue warn]: $listeners is readonly. $attrs is readonly.

情况1:多处声明了new Vue,解决方案:删除一个,用全局变量引用同一个Vue

情况2:import Vue from 'Vue';第二个Vue首字母不要大写,vue即可

import Vue from 'vue';

情况3:在使用多层级组件的时候,出现了A组件调用B组件,B组件再调用了C组件。直接使用了A组件修改了C组件的数据,这个不合法的。

具体解决办法:

在B组件中嵌入C组件的时候这么写

<C v-bind="$attrs" v-on="$listeners"></C>

<!-- 通过v-on绑定$listeners事件,A组件能越过B组件直接监听获取C组件触发的事件 -->

<!-- 通过v-bind绑定$attrs属性,C组件能越过B组件直接获取到A组件中传递下来的props(除了B组件中props声明的) -->

这样,就实现了A→B→C跳跃式监听事件和传参。

当然也可以用Vuex解决这个问题。【高效】极致简化vuex.js(仅需6行代码),让快速敏捷开发不是梦!_rvsxjs-CSDN博客文章浏览阅读293次。前情提示:有一天,我要实现一个效果→点击某个按钮改变一个全局变量,并且要让绑定了该变量的所有位置异步渲染。我试过用一个全局的js文件存放该变量,值虽然该变量了,但是没有做到异步渲染。还没打开页面给我报错 全局变量 of undefined,我才想起页面还没加载完的时候window全局对象都是空值!我看了官方文档,也看了很多论坛大牛的博客,发现大家都在src下面创建一个sotre._vuex.js。只需创建一个vuex.js文件,让你马上学会使用Vuex,尽管Vuex是个鸡肋!_rvsxjshttps://blog.csdn.net/qq_37860634/article/details/131741966

 

情况4:组件库的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错误

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值