vue2 provide/inject watch 监控inject中值变化

news2024/11/24 20:47:55

在Vue 2.x中,使用inject注入的值默认情况下是不能被watch直接监控到的,因为inject提供的值不是响应式的。这是Vue 2.x的设计,与Vue 3.x中的provideinject不同,Vue 3.x中的inject提供的值是响应式的,可以直接被watch监控到。

如果你希望在Vue 2.x中监控inject中的值的变化

使用计算属性或引用类型的响应式数据:将inject提供的值保存在组件的响应式数据中,然后使用计算属性或watch来监控这个响应式数据的变化。例如:

<template>
  <div>
    <p>{{ injectedValue }}</p>
  </div>
</template>

<script>
export default {
  inject: ['injectedValue'],
  data() {
    return {
      // 将 injectedValue 存储在响应式数据中
      valueToWatch: this.injectedValue,
    };
  },
  watch: {
    valueToWatch(newValue, oldValue) {
      console.log('injectedValue 变化:', newValue, oldValue);
      // 在这里可以执行相应的操作
    },
  },
};
</script>

示例二、

父组件:

<template>
  <div @click="changeMap"></div>
</template>

<script>
export default {
   provide() {
        return {
            mapLoad: this.mapLoad,
        };
    },
  data(){
        return {
            isLoadMap: false
        }
    },
  methods: {
        mapLoad(){
            return this.isLoadMap
        },
        changeMap(){
           this.isLoadMap = !this.isLoadMap
        }
    },
};
</script>

inject使用的地方

<template>
  <div>
  </div>
</template>

<script>
export default {
  inject: ['mapLoad'],
   computed: {
        watchloadmap() {
            return this.mapLoad()
        }
    },
  watch: {
    watchloadmap(newValue, oldValue) {
      console.log('injectedValue 变化:', newValue, oldValue);
      // 在这里可以执行相应的操作
    },
  },
};
</script>

注意事项:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Java 基础篇】Java同步代码块解决数据安全

多线程编程是现代应用程序开发中的常见需求&#xff0c;它可以提高程序的性能和响应能力。然而&#xff0c;多线程编程也带来了一个严重的问题&#xff1a;数据安全。在多线程环境下&#xff0c;多个线程同时访问和修改共享的数据可能导致数据不一致或损坏。为了解决这个问题&a…

心理咨询预约微信小程序开发制作步骤

随着互联网的普及和人们对心理健康的重视&#xff0c;越来越多的心理咨询需求在日常生活中涌现。为了满足这一需求&#xff0c;开发一款心理咨询预约微信小程序势在必行。本文将介绍使用乔拓云网这个第三方制作平台来制作这款小程序的具体步骤。 1. 找一个合适的第三方制作平台…

竞赛选题 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

ChatGPT追祖寻宗:GPT-3技术报告要点解读

论文地址&#xff1a;https://arxiv.org/abs/2005.14165 往期相关文章&#xff1a; ChatGPT追祖寻宗&#xff1a;GPT-1论文要点解读_五点钟科技的博客-CSDN博客ChatGPT追祖寻宗&#xff1a;GPT-2论文要点解读_五点钟科技的博客-CSDN博客 本文的标题之所以取名技术报告而不是论文…

【差旅游记】初见乌海湖

哈喽&#xff0c;大家好&#xff0c;我是雷工。 最近在乌海出差&#xff0c;有幸见到了传说中在沙漠中看海的“黄河明珠”——乌海湖。 前段时间一直有点忙&#xff0c;现在有点时间&#xff0c;趁还没忘光&#xff0c;简单整理记录下。 那是在上个月&#xff0c;2023年8月8号…

K8S:Pod容器中的存储方式及PV、PVC

文章目录 Pod容器中的存储方式一&#xff0e;emptyDir存储卷1.emptyDir存储卷概念2.emptyDir存储卷示例 二.hostPath存储卷1.hostPath存储卷概念2.hostPath存储卷示例 三.nfs共享存储卷1.nfs共享存储卷示例 四.PV和PVC1.PV、PVC概念2.PVC 的使用逻辑及数据流向3.storageclass插…

Conditional DETR(ICCV 21)

Conditional DETR&#xff08;ICCV 21&#xff09; Conditional DETR for Fast Training Convergence 加速detr收敛&#xff08;50 epoch收敛&#xff09; DETR收敛慢的原因 DETR训练收敛速度慢&#xff0c;需要500 epochs DETR的Cross Attention高度依赖content embedding…

Go编程规范

文章目录 注释转义符定义变量方法一&#xff1a;指定变量类型&#xff0c;声明后若不赋值&#xff0c;使用默认值方法二&#xff1a;根据值自行判定变量类型(类型推导)方法三&#xff1a;省略var, 注意:左侧的变量不应该是已经声明过的&#xff0c;否则会导致编译错误[推荐]全局…

通讯网关软件001——利用CommGate X2Access-U实现OPC UA数据转储Access

本文介绍利用CommGate X2ACCESS-U实现从OPC UA Server读取数据并同步转储至ACCESS数据库。CommGate X2ACCESS-U是宁波科安网信开发的网关软件&#xff0c;软件可以登录到网信智汇(http://wangxinzhihui.com)下载。 【案例】如下图所示&#xff0c;实现从OPC UA Server实时读取…

经典指标策略回测一览

编辑 经典指标策略回测一览 关键词 A股市场&#xff08;沪深京三市&#xff09; 5000股票20年内日线走势回测&#xff0c;区分除权&#xff0c;前复权&#xff0c;后复权三种模式&#xff1b;由于数据量较大&#xff0c;采用两种方式共享数据&#xff0c;一是 天启网站的数据…

Minor GC、Young GC、Full GC、Old GC、Major GC、Mixed GC 一文搞懂

简介 大家经常会看到各种各样的 GC 名称&#xff0c;比如&#xff1a;Minor GC、Young GC、Full GC、Old GC、Major GC、Mixed GC。 刚开始看到这么多 GC 名词后&#xff0c;真的是心累 哎&#xff0c;没办法&#xff0c;一声国粹之后也只能慢慢的把它们理理顺。 GC分类 我…

(vue2)面经基础版-案例效果分析

配路由 先配一级&#xff0c;一级里面配二级。一级路由&#xff1a;首页&#xff08;二级&#xff1a;嵌套4个小页面&#xff09;、详情页 高亮a->router-link&#xff0c;高亮效果对自带高亮类名router-link(-exact)-active设置 注&#xff1a;通过children配置项&#…

【springboot源码】深度解析@Value赋值时机及底层原理

1.Value使用 Value主要是让我们程序动态的将外部值注入到bean中的&#xff0c;使用方式主要如下两种&#xff1a; 1.1Value("${}")&#xff1a;可以获取对应属性文件中定义的属性值。 1.2Value("#{}")&#xff1a;表示 SpEl 表达式通常用来获取 bean 的…

【操作系统】聊聊什么是CPU上下文切换

对于linux来说&#xff0c;本身就是一个多任务运行的操作系统&#xff0c;运行远大于CPU核心数的程序&#xff0c;从用户视角来看是并发执行&#xff0c;而在CPU视角看其实是将不同的CPU时间片进行分割&#xff0c;每个程序执行一下&#xff0c;就切换到别的程序执行。那么这个…

[激光原理与应用-70]:AD8512运算放大器的工作原理与连接电路

目录 概述&#xff1a; 一、AD8512的功能与主要特征 一、AD8510 1.1 管脚说明 1.2 电源电压 1.3 输入信号电压 1.4 偏置电压 1.5 参考连接 1.6 放大倍数 1.7 参考电路 二、AD8512 1.1 管脚说明 1.2 AD8512的电路连接 1.3 如何调整放大倍数 1.4 AD8512半波与全波…

基于 Socket 网络编程

基于 Socket 网络编程 前言一、基于Socket的网络通信传输&#xff08;传输层&#xff09;二、UDP 的数据报套接字编程1、UDP 套接字编程 API2、使用 UDP Socket 实现简单通信 三、TCP 流套接字编程1、TCP 流套接字编程 API2、使用 TCP Socket 实现简单通信3、使用 Tcp 协议进行…

【数据链路层】网络基础 -- MAC帧协议与ARP协议

数据链路层认识以太网以太网帧格式(MAC帧)认识MAC地址对比理解MAC地址和IP地址认识MTUMTU对IP协议的影响MTU对UDP协议的影响MTU对于TCP协议的影响 再谈局域网转发原理&#xff08;基于协议&#xff09;ARP协议ARP协议的作用ARP协议的工作流程ARP数据报的格式 数据链路层 用于两…

网工内推 | 雄岸区块链集团,网安工程师,HCIE-Security、CISP优先

01 雄岸区块链集团 招聘岗位&#xff1a;网络安全测试工程师 职责描述&#xff1a; 1、负责安全测试工作&#xff0c;包括渗透测试、漏洞分析、攻防演练和安全评估等。 2、发掘业务系统安全问题&#xff0c;跟进安全整改。 3、出现网络攻击或安全事件时&#xff0c;进行紧急…

Tensorrt8.6.1安装

环境配置&#xff1a;Tensorrt8.6.1 &#xff0c;cuda11.6, cudnn8.6.0, torch1.13.1cu116, torchvision0.14.1cu116 1.先把cuda11.6, cudnn8.6.0, torch1.13.1cu116, torchvision0.14.1cu116这几个安装完之后 2.下载Tensorrt8.6.1&#xff0c;复制移动以下文件 将include中头…

Nat. Rev. Bioeng. | 中山大学左涛组详述肠道微生态工程化改造

肠道微生态工程化改造 Engineering the gut microbiome Review Article, 2023-6-16, Nature Reviews Bioengineering DOI&#xff1a;10.1038/s44222-023-00072-2 原文链接&#xff1a;https://www.nature.com/articles/s44222-023-00072-2 第一作者&#xff1a;Xiaowu Bai&…