Vue跨级通信(重点)

news2024/11/24 5:28:04

当不使用Vuex的前提下,子孙传递就得使用另外一种办法:

provide 和 inject

总结:

provide / inject 类似于消息的订阅和发布。

- inject接收数据。

- provide提供或发送数据,

(1)provide(name,value):函数接收两个参数

name:定义提供 property的name。 value:property的值。

(2)inject(name,default)函数有两个参数

name:接收 provide 提供的属性名。

default:设置默认值,可以不写,是可选参数

示例:

A组件:

<template>
  <div>
    <h3>A组件</h3>
    <input type="text" v-model="word">
    <br>
    <hr>
    <brother></brother>
    <br>

  </div>
</template>

<script>
import brother from '../test/brother.vue'
export default {
    components:{
        brother,
    },
    data(){
        return{
            word:'123'
        }
    },
    provide:function(){
        return {
            Message:()=>this.word
        }
    }
}
</script>

<style>

</style>

注意

在这里须注意的是,当祖先传入给子孙的是一个对象,则provide返回的是一个对象;当祖先传入的不是一个对象时,则provide返回的是一个函数。

B组件:

<template>
  <div>
    C组件:
    {{ getFather }}
    {{ mes }}
  </div>
</template>

<script>
export default {
    data(){
        return {
            mes:''
        }
    },
    inject:['Message'],
    computed:{
        getFather(){
            return this.Message()
        }
    }
}
</script>

<style>

</style>

注意:

子孙组件通过inject进行接收,然后通过computed属性将接收到的值返回。这里不一定使用computed属性,其他属性也可以,因为inject里面的数据即为祖先组件传递的值。

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

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

相关文章

Dubbo性能调优参数以及原理

Dubbo作为一个服务治理框架&#xff0c;功能相对来说比较完善&#xff0c;性能也挺不错。但很多同学在使用dubbo的时候&#xff0c;只是简单的参考官方说明进行配置和应用&#xff0c;并没有过多的去思考一些关键参数的意义&#xff0c;最终做出来的效果总是差强人意,接下来我们…

扬帆优配|反弹涨超70%,昨收三连板,稀土行业或迎大事件

本年第一批稀土挖掘锻炼目标行将发放。 2月22日晚&#xff0c;东易日盛公告称&#xff0c;公司收到董事、副总经理兼财务总监李双侠出具的《关于未严格执行股份减持方案的致歉函》&#xff0c;其此次减持方案已施行结束&#xff0c;但在施行减持方案时&#xff0c;因操作失误&a…

从没想过开源 API 工具的 Mock 功能,这么好用

很多时候&#xff0c;接口尚未开发完成&#xff0c;在系统交互双方定义好接口之后&#xff0c;我们可以提前进行开发和测试&#xff0c;并不依赖上游系统的开发实现。 通过使用Mock模拟数据接口&#xff0c;我们即可在只开发了UI的情况下&#xff0c;无须服务端的开发就可以进行…

证明CPU指令是乱序执行的

承接上文CPU缓存一致性原理双击QQ.exe从磁盘加载到内存里面&#xff0c;内存里面就会有了一个进程&#xff0c;进程产生的时候会产生一个主线程&#xff0c;就是main方法所在的线程&#xff0c;cpu会找到main开始的地方&#xff0c;把它的指令读取过来放到程序计数器&#xff0…

从功能测试进阶自动化测试,熬夜7天整理出这一份3000字超全学习指南

一、为什么要学习自动化测试&#xff1f; 如果在前两年&#xff0c;可能10个测试员有6个都是做的功能测试&#xff0c;但随着测试技术的发展以及测试工作的深入&#xff0c;传统的手工测试已经无法满足多模块的测试需求&#xff0c;所以为了提高测试效率和测试质量&#xff0c…

关于 mac 本地配置域名能 ping 通,但是浏览器不能访问的问题(而其他电脑操作可访问)

关于 mac 本地配置域名能 ping 通&#xff0c;但是浏览器不能访问的问题&#xff08;而其他电脑操作可访问&#xff09;1. 配置域名的方式1.1 sudo vim /etc/hosts1.2 浏览器插件 LiveHosts2. 问题描述3. 解决问题方法3.1 尝试方法1—确保代理都关闭3.2 尝试方法2—确保域名能p…

一文学会 Spring 整合 MyBatis

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

js闭包简单理解

js里面的闭包是一个难点也是它的一个特色&#xff0c;是我们必须掌握的js高级特性&#xff0c;那么什么是闭包呢&#xff1f;它又有什么作用呢&#xff1f; 1&#xff0c;提到闭包我们这里先讲解一下js作用域的问题 js的作用域分两种&#xff0c;全局和局部&#xff0c;基于我…

代码随想录第十六天(347、194、195、94)

347. 前 K 个高频元素 答案 思路&#xff1a; 1、首先&#xff0c;用到了每个值对应的出现次数&#xff0c;想到要用哈希map存放 2、还需要将出现频率从大到小进行排序&#xff0c;找出前k个元素 3、时间复杂度应该比O&#xff08;nlogn&#xff09;小 如果想用快速排序&…

黑盒渗透盲打lampiao

一、查找主机ip&#xff0c;通过Nmap扫描工具排查出我的靶机的IP 为.134 python tools.py ip -i 192.168.12.0 -h 254 -l 1 二、扫描其他端口。 1898 三、查看网站漏洞情况&#xff0c;典型的漏洞特征 Ac扫描漏洞情况&#xff0c;利用典型的漏洞。 四、开始getshell 1、启动M…

SigmaPlot科学绘图工具:ROC曲线分析及AUC组间差异的显著性分析

目的 初步使用SigmaPlot科学绘图工具&#xff1b;进行ROC曲线绘制并分析检验变量AUC组间差异性是否显著 软件下载及安装 SigmaPlot下载安装按照这个教程即可&#xff1a;https://www.hhkxxw.com/24799.html 快速通道&#xff1a;SigmaPlot下载链接&#xff1a;百度网盘链接…

如何实现文件高速传输,推荐镭速高速文件传输解决方案

随着互联网的发展&#xff0c;文件传输越来越频繁&#xff0c;如何实现文件高速传输已经越来越成为企业发展过程中需要解决的问题&#xff0c; 在当今的业务中&#xff0c;随着与客户和供应商以及内部系统的所有通信的数据量不断增加&#xff0c;对高速文件传输解决方案的需求…

Prometheus之Alertmanager告警

告警流程 Prometheus主要是提供了数据的采集和存储&#xff0c;Alertmanager组件主要实现告警功能。Alertmanager 主要用于接收 Prometheus 发送的告警信息&#xff0c;它支持丰富的告警通知渠道&#xff0c;而且很容易做到告警信息进行去重&#xff0c;降噪&#xff0c;分组等…

Elasticsearch 基础(三)之相关术语概念及原理

目录前言一、集群1、相关术语概念1.1、集群&#xff08;Cluster&#xff09;1.2、节点&#xff08;Node&#xff09;1.3、角色&#xff08;Roles&#xff09;1.4、分片&#xff08;Shard&#xff09;2、集群场景及原理2.1、集群健康2.2、空节点2.3、单节点2.4、集群追加节点2.5…

【GeoDjango框架解析——读取矢量数据写入postgis数据库】

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 geodjango框架解析之读取矢量数据shp文件写入postgis数据库 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录…

我记不住的那些maven内容

背景&#xff1a; 之前使用maven都是基于IDE并且对maven本身也很少究其过程和原理&#xff0c;当出现问题也不知道如何解决&#xff0c;后续想使用命令行来进行操作&#xff0c;并通过文档记录一下学习的内容加深理解以防止忘记。 一、简要介绍 maven是通过插件来增强功能&am…

项目经理该怎样做好项目质量管理工作?

项目经理做好项目质量管理工作&#xff0c;重点需要关注以下几个方面&#xff1a; 1、质量产生于过程 需要成熟稳定的软件过程 软件项目质量产生于开发过程&#xff0c;要想真正提高软件质量&#xff0c;必须有一个成熟而稳定的软件过程。如因特殊原因造成的过程性能不稳定&…

自动化测试框架pytest教程(一)pytest用例编写和pytest前后置方法

自动化测试框架pytest教程(一)pytest用例编写和pytest前后置方法 目录&#xff1a;导读 一、入门使用 1、环境安装 2、用例编写 3、执行测试 二、前后置方法和fixture机制 1、xunit风格的前后置方法 函数用例的前后置方法 测试类中用例的前后置方法 模块级别的前后置…

Tekton实战案例--S2I

案例环境说明 示例项目&#xff1a; 代码仓库&#xff1a;https://gitee.com/mageedu/spring-boot-helloWorld.git 构建工具maven pipeline各Task git-clone&#xff1a;克隆项目的源代码 build-to-package: 代码测试&#xff0c;构建和打包 generate-build-id&#xff1a;生…

valgrind 移植到arm64 平台上总结

valgrind 介绍valgrind是查找内存泄漏的神器&#xff0c;你可以自动的检测许多内存管理和线程的bug&#xff0c;避免花费太多的时间在bug寻找上&#xff0c;使得你的程序更加稳固。 下载地址&#xff1a;https://valgrind.org/downloads/ 本人下载的是valgrind-3.19.0valgrind编…