当前位置: 首页 > news >正文

vue组件之间的数据共享

一、组件之间的关系

1.父子关系

2.兄弟关系

3.后代关系

二、父子组件之间的数据共享

1.父-->子共享数据

父组件通过v-bind属性绑定向子组件共享数据,子组件需要使用props接受数据。

<template><p>父组件</p><Son :msg="msg" :count="count"></Son>
</template>
<script>
import Son from './son.vue'
export default {components:{Son},data(){return{msg:'hello',count:123}}
}
</script><template><p>子组件{{ msg }}{{ count }}</p>
</template>
<script>
export default {props:{msg:String,count:Number}
}
</script>
2.子-->父共享数据

子组件通过自定义事件向父组件共享数据。

<template><p>父组件{{ count }}</p><Son @countFn="changeFn"></Son>
</template>
<script>
import Son from './son.vue'
export default {components:{Son},data(){return{count:123}},methods:{changeFn(num){this.count+=num}}
}
</script><template><p>子组件 <button @click="addFn">按钮</button></p>
</template>
<script>
export default {emits:['countFn'],data(){return{count:123}},methods:{addFn(){this.$emit('countFn',this.count)}}
}
</script>
3.父<-->子 双向数据同步

父组件在使用子组件期间,可以使用v-model指令维护组件内外数据的双向同步。

<template><p>父组件{{ count }}</p><Son v-model:count="count"></Son>
</template>
<script>import Son from './son.vue'export default {components:{Son},data(){return{count:123}}}
</script><template><p>子组件{{ count }} <button @click="addFn">按钮</button></p>
</template>
<script>
export default {props:['count'],emits:['update:count'],methods:{addFn(){this.$emit('update:count',this.count+1)}}
}
</script>

三、兄弟组件之间的数据共享EventBus

兄弟组件之间实现数据共享的方案是EventBus。可以借助于第三方包mitt来创建eventBus对象,从而实现兄弟组件之间的数据共享。

1.创建eventBus,在数据的接收方和发送方共享eventBus对象。

2.数据接收方,导入并得到eventBus实例对象,调用eventBus的on()方法,声明自定义事件,通过事件回调接收数据。bus.on('事件名称', 事件处理函数)

3.数据发送方,导入并得到eventBus实例对象,调用eventBus的emit()方法,向外发送数据。

bus.emit('事件名称', 要发送的数据)

npm i mitt//eventBus.js
import mitt from 'mitt';
const bus = mitt();
export default bus;<template><p>父组件</p><div class="son"><Son1></Son1><Son2></Son2>  </div>
</template>
<script>
import Son1 from './son1.vue'
import Son2 from './son2.vue'
export default {components:{Son1,Son2},
}
</script><template><p>数据发送方son1:{{ count }} <button @click="addFn">按钮</button></p>
</template>
<script>
import bus from '../../ulits/eventBus'
export default {data(){return{count:0}},methods:{addFn(){this.count+=1bus.emit('changeCount',this.count)}}
}
</script><template><p>数据接收方son2:{{ count }}</p>
</template>
<script>
import bus from '../../ulits/eventBus'
export default {data(){return{count:0}},created(){bus.on('changeCount',(count)=>{this.count =count })}
}
</script>

四、后代关系组件之间的数据共享provide和inject

指的是父节点的组件向其子孙组件共享数据。此时组件之间嵌套关系比较复杂,可以使用provide和inject实现后代关系组件之间的数据共享。

1.父节点使用provide

2.子孙节点使用inject数组,接收父级节点向下共享的数据。

3.父节点使用provide向下共享数据时,可以结合computed函数向下共享响应式数据。

<template><p>父组件</p>{{ color }}<button @click="color='blue'"> Toggle Blue</button><Leval2></Leval2> 
</template>
<script>
import {computed} from 'vue'
import Leval2 from './leval2.vue'
export default {components:{Leval2},data(){return{color:'red',}},provide(){return{count: 0,color:computed(()=> this.color),}}
}
</script><template><p>二级组件</p><Leval3></Leval3> 
</template>
<script>
import Leval3 from './leval3.vue'
export default {components:{Leval3},
}
</script><template><p>三级组件{{ count }}{{color}}</p>
</template>
<script>
export default {inject:['color','count']
}
</script>

五、全局数据共享vuex

相关文章:

vue组件之间的数据共享

一、组件之间的关系 1.父子关系 2.兄弟关系 3.后代关系 二、父子组件之间的数据共享 1.父-->子共享数据 父组件通过v-bind属性绑定向子组件共享数据&#xff0c;子组件需要使用props接受数据。 <template><p>父组件</p><Son :msg"msg"…...

LangChain:构建强大的LLM应用的全方位框架

LangChain&#xff1a;构建强大的LLM应用的全方位框架 引言 在人工智能和大语言模型&#xff08;LLMs&#xff09;快速发展的今天&#xff0c;开发者们迫切需要一个强大而灵活的框架来简化LLM应用的开发过程。LangChain应运而生&#xff0c;它不仅提供了丰富的工具和组件&…...

自有平台自有品牌如何利用电商API接口做定价参考(多平台商品详情数据接口)

如今&#xff0c;多数自有商城自有品牌在为产品做定价时都会参考淘宝|天猫|京东等主流电商平台的商品价格以做参考&#xff0c;这一行为的好处主要有以下几点&#xff1a; 通过参考主流平台价格&#xff0c;用户更能了解目标市场中消费者对产品的接受度&#xff0c;从而制定出符…...

三万字长文Java面试题——基础篇(注:该篇博客将会一直维护 最新维护时间:2024年9月18日)

&#x1f9f8;本篇博客重在讲解Java基础的面试题&#xff0c;将会实时更新&#xff0c;欢迎大家添加作者文末联系方式交流 &#x1f4dc;JAVA面试题专栏&#xff1a;JAVA崭新面试题——2024版_dream_ready的博客-CSDN博客 &#x1f4dc;作者首页&#xff1a; dream_ready-CSDN博…...

数学建模——熵权+TOPSIS+肘部法则+系统聚类

文章目录 一、起因二、代码展示 一、起因 我本科的数学建模队长找上我&#xff0c;让我帮她写下matlab代码&#xff0c;当然用的模型还是曾经打比赛的模型&#xff0c;所以虽然代码量多&#xff0c;但是写的很快&#xff0c;也是正逢中秋&#xff0c;有点时间。 当然我也没想到…...

Java | Leetcode Java题解之第403题青蛙过河

题目&#xff1a; 题解&#xff1a; class Solution {public boolean canCross(int[] stones) {int n stones.length;boolean[][] dp new boolean[n][n];dp[0][0] true;for (int i 1; i < n; i) {if (stones[i] - stones[i - 1] > i) {return false;}}for (int i 1…...

828华为云征文|华为Flexus云服务器搭建OnlyOffice私有化在线办公套件

一、引言 在当今数字化办公的时代&#xff0c;在线办公套件的需求日益增长。华为Flexus云服务器凭借其强大的性能和稳定性&#xff0c;为搭建OnlyOffice私有化在线办公套件提供了理想的平台。在2024年9月14日这个充满探索精神的日子里&#xff0c;我们开启利用华为Flexus云服务…...

[Java]maven从入门到进阶

介绍 apache旗下的开源项目,用于管理和构建java项目的工具 官网: Welcome to The Apache Software Foundation! 1.依赖管理 通过简单的配置, 就可以方便的管理项目依赖的资源(jar包), 避免版本冲突问题 优势: 基于项目对象模型(POM),通过一小段描述信息来管理项目的构建 2…...

Leetcode面试经典150题-130.被围绕的区域

给你一个 m x n 的矩阵 board &#xff0c;由若干字符 X 和 O 组成&#xff0c;捕获 所有 被围绕的区域&#xff1a; 连接&#xff1a;一个单元格与水平或垂直方向上相邻的单元格连接。区域&#xff1a;连接所有 O 的单元格来形成一个区域。围绕&#xff1a;如果您可以用 X 单…...

Ruffle 继续在开源软件中支持 Adobe Flash Player

大多数人已经无需考虑对早已寿终正寝的 Adobe Flash 的支持&#xff0c;但对于那些仍有一些 Adobe Flash/SWF 格式的旧资产&#xff0c;或想重温一些基于 Flash 的旧游戏/娱乐项目的人来说&#xff0c;开源 Ruffle 项目仍是 2024 年及以后处理 Flash 的主要竞争者之一。 Ruffl…...

【postgres】笔记

数据库相关笔记 1.分区表创建时间戳设置问题2.查询语句2.1查询数据库某表有多少行2.2 表中某列值类型是 1.分区表创建时间戳设置问题 今天早上发现postgres数据库表中总会隔4天丢失一天的数据&#xff0c;后来查了一下&#xff0c;发现是分区表创建的有问题。 如图所示 可以看…...

#if等命令的学习

预处理命令 #include&#xff08;文件包含命令&#xff09; #define&#xff08;宏定义命令&#xff09; #undef #if&#xff08;条件编译&#xff09; #ifdef #ifndef #elif #endif defined函数&#xff08;与if等结合使用&#xff09; 下面将解释上述各自的用法、使用…...

【有啥问啥】深入浅出马尔可夫链蒙特卡罗(Markov Chain Monte Carlo, MCMC)算法

深入浅出马尔可夫链蒙特卡罗&#xff08;Markov Chain Monte Carlo, MCMC&#xff09;算法 0. 引言 Markov Chain Monte Carlo&#xff08;MCMC&#xff09;是一类用于从复杂分布中采样的强大算法&#xff0c;特别是在难以直接计算分布的情况下。它广泛应用于统计学、机器学习…...

java企业办公自动化OA

技术架构&#xff1a; sshjbpm 功能描述&#xff1a; 用户管理&#xff0c;岗位管理&#xff0c;部门管理&#xff0c;权限管理&#xff0c;网上交流&#xff0c;贴吧&#xff0c;审批流转。权限管理是树状结构人性化操作&#xff0c;也可以用作论坛。 效果图&#xff1a;...

【leetcode】树形结构习题

二叉树的前序遍历 返回结果&#xff1a;[‘1’, ‘2’, ‘4’, ‘5’, ‘3’, ‘6’, ‘7’] 144.二叉树的前序遍历 - 迭代算法 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,…...

在ros2中安装gazebo遇到报错

安装命令&#xff1a; sudo apt-get install ros-${ROS_DISTRO}-ros-gz 报错如下&#xff1a; E: Unable to locate package ros-galactic-ros-gz 解决方法&#xff1a; 用如下安装命令&#xff1a; sudo apt install ros-galactic-ros-ign 问题解决&#xff01;...

VMware vSphere 8.0 Update 3b 发布下载,新增功能概览

VMware vSphere 8.0 Update 3b 发布下载&#xff0c;新增功能概览 vSphere 8.0U3 | ESXi 8.0U3 & vCenter Server 8.0U3 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-vsphere-8-u3/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页…...

在设计开发中,如何提高网站的用户体验?

在网站设计开发中&#xff0c;提高用户体验是至关重要的。良好的用户体验不仅能提升用户的满意度和忠诚度&#xff0c;还能增加转化率和用户留存率。以下是一些有效的方法和策略&#xff1a; 优化页面加载速度 减少HTTP请求&#xff1a;合并CSS和JavaScript文件以减少HTTP请求…...

油耳拿什么清理比较好?好用的无线可视挖耳勺推荐

油耳的朋友通常都是用棉签来掏耳。这种方式是很不安全的。因为使用棉签戳破耳道和棉絮掉落在耳道中而引起感染的新闻不在少数。在使用过程中更加建议大家可视挖耳勺来清理会更好。不仅清晰度得干净而且安全会更高。但最近这几年我发现可视挖耳勺市面上不合格产品很多&#xff0…...

永久配置清华源,告别下载龟速

为了每次使用 pip 时自动使用清华源&#xff0c;可以通过以下步骤进行配置&#xff1a; 方法一&#xff1a;通过命令行配置 你可以在命令行中运行以下命令来自动设置清华源&#xff1a; pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple此命令会将…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

对象回调初步研究

_OBJECT_TYPE结构分析 在介绍什么是对象回调前&#xff0c;首先要熟悉下结构 以我们上篇线程回调介绍过的导出的PsProcessType 结构为例&#xff0c;用_OBJECT_TYPE这个结构来解析它&#xff0c;0x80处就是今天要介绍的回调链表&#xff0c;但是先不着急&#xff0c;先把目光…...

React父子组件通信:Props怎么用?如何从父组件向子组件传递数据?

系列回顾&#xff1a; 在上一篇《React核心概念&#xff1a;State是什么&#xff1f;》中&#xff0c;我们学习了如何使用useState让一个组件拥有自己的内部数据&#xff08;State&#xff09;&#xff0c;并通过一个计数器案例&#xff0c;实现了组件的自我更新。这很棒&#…...