父组件中循环生成多个子组件时,有且只有最后一个子组件的watch对象生效问题及解决办法

提示:父组件中循环生成多个子组件时,有且只有最后一个子组件的watch对象生效问题及解决办法

文章目录

    • @[TOC](文章目录)
  • 前言
  • 一、问题
  • 二、解决方法——使用function函数代替箭头函数()=>{}
  • 总结

前言

‌‌‌‌‌问题:子组件用that解决watch无法获取this,this为undefined问题,循环生成多个子组件,只有最后一个子组件的watch触发了多次;
原因:that是声明在打包的js文件中,每个子组件都会覆盖that为当前组件的this,最后that指向最后一个组件的this;

一、问题

打印watch中this,和selectCount,是五个重复的组件count:5,5,5,5,5
在这里插入图片描述

在这里插入图片描述

1、selectCom.vue

<template><div class="select_com"><div class="select_com_content" ref="printImgContent"><el-select v-model="model" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option></el-select></div></div></template><script>let that;export default {name: 'preview',props:{type:{type:String,default:'car',},selectCount:{type:Number,default:0,},},data () {return {model:'',optionsData:{car:[{name:'丰田',value:'1',},{name:'大众',value:'2',},{name:'起亚',value:'3',},{name:'别克',value:'4',},],animal:[{name:'猫',value:'1',},{name:'狗',value:'2',},{name:'牛',value:'3',},{name:'羊',value:'4',},],},options:[],}},watch:{type:{handler:()=>{console.log(that,that.selectCount,'-------------');},deep:true}},created(){that = this;},}</script><style scoped></style>

2、home.vue组件

<template><div class="home_box"><el-button @click="changeType('car')">car</el-button><el-button @click="changeType('animal')">animal</el-button><selectCom :type="type"></selectCom></div>
</template><script>import selectCom from './preview/selectCom';export default {name: 'Hmoe',components:{selectCom},data () {return {type:'car',}},methods: {changeType(type){this.type = type;},}}</script><style scoped></style>

二、解决方法——使用function函数代替箭头函数()=>{}

打印watch中this,和selectCount,是五个单独组件count:1,2,3,4,5
在这里插入图片描述
在这里插入图片描述

selectCom.vue

<template><div class="select_com"><div class="select_com_content" ref="printImgContent"><el-select v-model="model" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option></el-select></div></div></template><script>export default {name: 'preview',props:{type:{type:String,default:'car',},selectCount:{type:Number,default:0,},},data () {return {model:'',optionsData:{car:[{name:'丰田',value:'1',},{name:'大众',value:'2',},{name:'起亚',value:'3',},{name:'别克',value:'4',},],animal:[{name:'猫',value:'1',},{name:'狗',value:'2',},{name:'牛',value:'3',},{name:'羊',value:'4',},],},options:[],}},watch:{type:{handler:function(){console.log(this,this.selectCount,'-------------');},deep:true}},}</script><style scoped></style>

总结

踩坑路漫漫长@~@

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringMVC(八)Knife4j 接口文档

目录 一 基础使用 1 配置pom.xml相关依赖 2 项目配置 3 输入指定路径&#xff08;http://localhost:8080/doc.html&#xff09; 二 一些使用方法 1 Tag 2 Operation 3 Schema 4 Parameter 5 可以根据需求来设置 补充&#xff1a;日期的格式化 Knife4j 是基于 Swag…

二分算法--整数二分

二分算法–整数二分 假如给定一个整数序列&#xff0c;{ a 1 a_1 a1​, a 2 a_2 a2​, a 3 a_3 a3​, …, a n a_n an​} 我们将整个数列根据某个元素 a x a_x ax​将数列分成左右两个部分&#xff08;某一部分可以包含 a x a_x ax​&#xff09; 首先我们定义一个mid 如…

有效的括号 力扣20

一、题目 二、思路 这题算是栈的经典应用。 主要有三种情况&#xff1a; 第一种情况&#xff1a;已经遍历完了字符串&#xff0c;但是栈不为空&#xff0c;说明有相应的左括号没有右括号来匹配&#xff0c;所以return false 第二种情况&#xff1a;遍历字符串匹配的过程中&…

Nuxt3 使用 ElementUI Plus报错问题

本地正常&#xff0c;打包上线异常 解决方式&#xff1a;官方组件需要被包裹一层&#xff0c;如以下示例&#xff1a; <ClientOnly> </ClientOnly>

uniapp vue3项目定义全局变量,切换底部babar时根据条件刷新页面

前言 uniapp项目中&#xff0c;每个tabbar页面来回点时候&#xff0c;不会触发页面更新。但是有时页面上有数据发生改变需要更新模版时&#xff0c;就得能及时的通知到页面。如果在onshow生命周期里每次都调用异步请求更新数据&#xff0c;有些不合理&#xff0c;况且页面有时…

vulnhub-Hackme-隧道建立、SQL注入、详细解题、思路清晰。

vulnhub-Hackme-隧道建立、SQL注入、详细解题、思路清晰。 一、信息收集 2025.3.14 PM 12&#xff1a;18 1、主机发现 arp-scan -l nmap -sn 192.168.66.0/24 2、端口扫描 1、nmap --min-rate 10000 -p- 192.168.66.182 -oA port 查看所有开放端口2、map -sS -sV 192.168.6…

20250317笔记本电脑在ubuntu22.04下使用acpi命令查看电池电量

20250317笔记本电脑在ubuntu22.04下使用acpi命令查看电池电量 2025/3/17 18:05 百度&#xff1a;ubuntu查看电池电量 百度为您找到以下结果 ubuntu查看电池电量 在Ubuntu操作系统中&#xff0c;查看电池电量通常可以通过命令行或者图形界面来完成。下面是一些常见的方法&…

openEuler系统迁移 Docker 数据目录到 /home,解决Docker 临时文件占用大问题

根据错误信息 write /var/lib/docker/tmp/...: no space left on device&#xff0c;问题的根源是 根分区&#xff08;/&#xff09;的磁盘空间不足&#xff0c;而非 /home 分区的问题。以下是详细解释和解决方案&#xff1a; 问题原因分析 Docker 临时文件占用根分区空间&…

Java 大视界 -- Java 大数据在智能政务舆情引导与公共危机管理中的应用(138)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…

Deepseek API+Python测试用例一键生成与导出-V1.0.2【实现需求文档图片识别与用例生成自动化】

在测试工作中&#xff0c;需求文档中的图片&#xff08;如界面设计图、流程图&#xff09;往往是测试用例生成的重要参考。然而&#xff0c;手动提取图片并识别内容不仅耗时&#xff0c;还容易出错。本文将通过一个自研小工具&#xff0c;结合 PaddleOCR 和大模型&#xff0c;自…

搭建opensbi+kernel+rootfs及基本设备驱动开发流程

目录 一.编译qemu 运行opensbikernelrootfs 1.编译qemu-9.1.1 2.安装riscv64编译器 3. 编译opensbi 4.编译kernel 5.编译rootfs 设备驱动开发流程 1.安装 RISC-V 交叉编译工具链 2.驱动开发准备 3.编写简易中断控制器驱动&#xff08;PLIC&#xff09;​ 4.配置内核…

16.使用读写包操作Excel文件:XlsxWriter 包

一 XlsxWriter 的介绍 XlsxWriter 只能写入 Excel 文件。 OpenPyXL 和 XlsxWriter 的区别在笔记 15 。 二 如何使用 XlsxWriter 1.导包 import datetime as dtimport xlsxwriterimport excel 2.实例化工作簿 book xlsxwriter.Workbook("xlxswriter.xlsx") book.clo…

LeetCode 124.二叉树中的最大路径和

题目&#xff1a; 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点&#xff0c;且不一定经过根节点。 路径和 是路径中各节点值的总和。 给你一个二叉树的根节点…

【Dubbo+Zookeeper】——SpringBoot+Dubbo+Zookeeper知识整合

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…

MCP 开放协议

本文翻译整理自&#xff1a; https://modelcontextprotocol.io/introduction 文章目录 简介一、关于 MCP二、为什么选择MCP&#xff1f;通用架构 三、开始使用1、快速入门2、示例 四、教程五、探索 MCP六、贡献和支持反馈贡献支持和反馈 服务器开发者一、构建服务器1、我们将要…

方差,协方差及协方差矩阵的计算

1.方差 方差是用来衡量一组数据的离散程度&#xff0c;数序表达式如下: σ 2 1 N ∑ i 1 N ( x i − μ ) 2 \sigma^2\frac1N\sum_{i1}^N(x_i-\mu)^2 σ2N1​i1∑N​(xi​−μ)2 σ 2 σ^2 σ2表示样本的总体方差&#xff0c; N N N 表示样本总数&#xff0c; x i x _i xi​…

【2025】基于python+django的慢性病健康管理系统(源码、万字文档、图文修改、调试答疑)

系统功能结构图如下 慢性病健康管理系统 课题背景 随着全球人口老龄化的加剧以及生活方式的改变&#xff0c;慢性病的发病率呈上升趋势&#xff0c;给个人健康和社会医疗资源带来了巨大压力。传统的慢性病管理模式存在信息不畅、患者参与度低、医疗资源分配不均等问题&#xf…

2.2 B/S架构和Tomcat服务器

本文介绍了B/S架构、Tomcat服务器及其与IDEA的整合。B/S架构是一种基于浏览器的网络计算模式&#xff0c;具有跨平台、易用性强的特点&#xff0c;适用于互联网应用。Tomcat是Apache开源的Web服务器&#xff0c;支持Java Web应用的部署和运行。文章通过实例演示了如何下载、安装…

QT非UI设计器生成界面的国际化

目的 UI设计器生成界面的国际化&#xff0c;比较容易实现些&#xff0c;因为有现成的函数可以调用&#xff0c;基本过程如下&#xff1a; void MainWindow::on_actLang_CN_triggered() {//中文界面qApp->removeTranslator(trans);delete trans;transnew QTranslator;trans…

Hackme靶机通关攻略

1&#xff0c;打开靶机和kali&#xff0c;在kali终端中扫描靶机ip,得到靶机ip为192.168.50.137 arp-scan -l 2&#xff0c;使用工具扫描出后台目录后访问login.php 3&#xff0c;注册后登陆发现有输入框&#xff0c;可以尝试使用sql注入来得到用户名和密码&#xff0c;密码需要…