报错[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错误

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/501412.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

跳跃游戏-java

题目描述: 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 解题思想: …

蓝桥OJ 3500阶乘求和(找规律)

阶乘求和 做这道题两个循环到202320232023肯定会超时间。 但是可以发现算到将近40的阶乘时&#xff0c;后9位的答案就已经可以确定了。 #include<bits/stdc.h> using namespace std; using ll long long; const ll p 1e9; int main() {ll res 0;for (int i 1; i &l…

真实sql注入以及小xss--BurpSuite联动sqlmap篇

前几天漏洞检测的时候无意发现一个sql注入 首先我先去网站的robots.txt去看了看无意间发现很多资产 而我意外发现admin就是后台 之后我通过基础的万能账号密码测试or ‘1‘’1也根本没有效果 而当我注入列的时候情况出现了 出现了报错&#xff0c;有报错必有注入点 因此我…

数据结构——线性表(二)

线性表顺序存储结构的优缺点 优点:1.无须为表示表中元素之间的逻辑关系而增加额外的存储空间 2.可以快速的存取表中的任一位置的元素 缺点:1.插入和删除操作需要移动大量的元素 2.当线性表长度变化较大的时候,难以确定存储空间的容量 3.造成存储空间的"碎片" 所以…

Golang线上内存爆掉问题排查(pprof)

Golang线上内存爆掉问题排查&#xff08;pprof&#xff09; 1 问题描述 某天&#xff0c;售后同事反馈&#xff0c;我们服务宕掉了&#xff0c;客户无法预览我们的图片了。 我们预览图片是读取存储在我们S3服务的数据&#xff0c;然后返回给前端页面展示。因为客户存在几百M的…

【Python】你真的了解爬虫吗?初识爬虫

什么是爬虫&#xff1f; 简单来说&#xff1a;代替人去模拟浏览器进行网页操作。 它能解决什么问题&#xff1f; 自动高效地获取互联网中我们感兴趣的信息并为我们所用。 即&#xff1a;为其他程序提供数据源 如搜索引擎(百度、Google等)、数据分析、大数据等等。 爬虫的分…

基于MS的水分子径向分布函数(RDF)计算

​​​​​​ 构建水分子结构 新建一个3D Atomistic.xsd文件&#xff0c;命名为H2O&#xff0c;点击 新建水分子结构。 图1 水分子构建 构建AC模型 步骤如下图所示&#xff0c;单击选择Modules中的Amorphous Call&#xff0c;Calculation&#xff1b;计算精度Quality选择 U…

python爬虫之selenium4使用(万字讲解)

文章目录 一、前言二、selenium的介绍1、优点&#xff1a;2、缺点&#xff1a; 三、selenium环境搭建1、安装python模块2、selenium4新特性3、安装驱动WebDriver驱动选择驱动安装和测试 基础操作1、属性和方法2、单个元素定位通过id定位通过class_name定位一个元素通过xpath定位…

首页HF粗排模型优化

[work rus_env]$ pwd /home/work/xx/du-rus/offline-tools/du_rus/rus_env [work rus_env]$ python buildenv_rus.py 5a0e771e938a486df3b8b3e1cde1a39c2006882d 5f3241963a3e39a8e1eae05d7075fc5b9278a7c7 打开日志级别 [workxx conf]$ vim /home/work/xx/du-rus/du_rus_…

代码随想录算法训练营DAY11|C++栈和队列Part.2|LeetCode:20.有效的括号、 1047.删除字符串中所有相邻重复项、150.逆波兰表达式

文章目录 20.有效的括号思路CPP代码 1047.删除字符串中所有相邻重复项思路CPP代码 150.逆波兰表达式思路什么是逆波兰表达式本题的思路 CPP代码 20.有效的括号 力扣题目链接 文章链接&#xff1a;20.有效的括号 视频链接&#xff1a;LeetCode&#xff1a;20. 有效的括号 状态&a…

Github profile Readme实现小游戏[github自述游戏]

Github profile Readme常用于个人主页介绍&#xff0c;将它与action自动化流程结合&#xff0c;可以实现一些小游戏 例如&#xff1a;2048、五子棋 2048实现 losehu (RUBO) GitHub 五子棋 https://github.com/losehu/losehu/tree/main 通过python/C编写可执行文件&#xf…

搜索与图论——Prim算法求最小生成树

在最小生成树问题里&#xff0c;正边和负边都没问题 朴素版prim算法 时间复杂度O(n^2) 生成树&#xff1a;每一次选中的t点&#xff0c;它和集合的距离对应的那条边&#xff0c;就是生成树的一条边 算法流程和dijkstra算法非常相似 #include<iostream> #include<cs…

浏览器工作原理与实践--栈空间和堆空间:数据是如何存储的

对于前端开发者来说&#xff0c;JavaScript的内存机制是一个不被经常提及的概念 &#xff0c;因此很容易被忽视。特别是一些非计算机专业的同学&#xff0c;对内存机制可能没有非常清晰的认识&#xff0c;甚至有些同学根本就不知道JavaScript的内存机制是什么。 但是如果你想成…

039—pandas 不规则表头转换为规整DataFrame

使用步骤 读入数据 代码如下&#xff08;示例&#xff09;&#xff1a; import pandas as pd import numpy as np df pd.DataFrame({0: [姓名, 性别],1: [张三, 男],2: [年龄,np.nan],3: [18,np.nan]}) dfdf.values.reshape([4,2])r len(df.columns)(pd.DataFrame(df.valu…

全国产数据采集卡定制,24位八通道以太网数据采集卡 labview 100K采样

XM702是一款以太网型高速数据采集卡&#xff0c;具有8通 道真差分输入&#xff0c;24位分辨率&#xff0c;单通道最高采样率100ksps八通 道同步共计800ksps、精密前置增益放大、集成IEPE/ICP硬件 支持的特点。本产品采用了多个高精度24位ADC单元及配合本 公司多年积累开发的前置…

24.WEB渗透测试-BurpSuite关于app抓包

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;23.WEB渗透测试-BurpSuite&#xff08;二&#xff09; 方法一&#xff1a;使用模拟器&am…

时序预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络时间序列预测

时序预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络时间序列预测 目录 时序预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现OOA-BP鱼鹰算法优化BP神经网络时间序列预测&#xff08;完整源码和数据…

工作常用设计模式

设计模式分类 创建者模式&#xff08;5种&#xff09; 单例模式原型模式工厂方法模式抽象工厂模式建造者模式 结构型模式&#xff08;7种&#xff09; 代理模式适配器模式桥接模式装饰者模式外观模式享元模式组合模式 行为型模式&#xff08;11种&#xff09; 模板方法模…

qdrant

文章目录 一、关于 qdrantFeaturesFiltering and PayloadHybrid Search with Sparse Vectors Vector Quantization and On-Disk StorageDistributed DeploymentHighlighted Features Integrations 二、快速上手1、下载和运行安装 qdrant-clientdocker 2、初始化 client3、创建 …