组合式api-跨层级组件通信provide和inject
vue2的provide和inject:https://v2.cn.vuejs.org/v2/api/#provide-inject
主要作用:
跨层级传递数据(响应和非相应数据都可以)、方法(函数),顶层可以跨N层传递数据和方法给子孙组件调用。
使用provide和inject可以在不太复杂的场景下,不使用状态管理(vuex、pinia)来解决组件通信问题。
使用provide提供数据,inject接收数据
测试效果:
使用provide提供方法、函数
应用场景:
子组件即便拿到顶层组件的数据,也无法修改,此时就可以使用provide提供方法,将顶层组件的方法传递给任意底层组件,那么底层组件就可以调用顶层组件的方法,从而实现修改顶层组件中的数据。
顶层组件代码:
<script setup>
import SonA from "@/compon/SonA.vue";
import {provide, ref} from "vue";
const money = ref(100)
const money2 = ref(100)
const changeMoney = (newMoney) => {
money.value -= newMoney
}
// 1. 使用provide函数提供提供需要传递的数据
// 注意:provide可以传递普通数据(非响应式),也可以传递响应式数据,
// money是ref函数返回的响应式对象,money.value是其中值(非响应式)
// 当传递响应式对象时,顶层组件的数据改变,下层组件中inject的数据也会改变,否则相反。
provide('money', money)
provide('money2', money2.value) // 虽然money2是响应式数据,但是我传的时候是传.value(非相应),因此money2改变值后,下层的组件不会改变。
// 还可以传递方法
provide('changeMoney', changeMoney)
</script>
<template>
<div>
我是父组件
<SonA/>
</div>
</template>
son代码:
<script setup>
import GrandSon from "@/compon/GrandSon.vue";
import {inject} from "vue";
const money = inject('money');
</script>
<template>
<div class="SonA">
我是SonA, 爸爸的钱 {{ money }}
<GrandSon></GrandSon>
</div>
</template>
grandSon代码:
<script setup>
import {inject} from "vue";
const money = inject('money');
const money2 = inject('money2');
const changeMoney = inject('changeMoney');
</script>
<template>
<div class="grandSon">
我是孙子, 爷爷的钱: {{ money }}
<div>
我是孙子, 爷爷的钱2(非响应式数据): {{ money2 }}
</div>
<button @click="changeMoney(10)">花钱-10</button>
</div>
</template>
测试效果:
组合式api-跨层级组件通信provide和inject的更多相关文章
- 组件通信 Provide&&inject
在父组件中利用Provide 注入数据,在所有的子组件都可以拿到这个数据 可以在vue 中用来刷新页面 <!DOCTYPE html> <html lang="en&quo ...
- Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- 【前端框架-Vue-基础】$attr及$listeners实现跨多级组件的通信
父子 A 组件与 B 组件之间的通信: (父子组件) 如上图所示,A.B.C三个组件依次嵌套,按照 Vue 的开发习惯,父子组件通信可以通过以下方式实现: A to B 通过props的方式向子组件传 ...
- vue之组件通信
vue组件通信一般分为以下几种情况: 1.父子组件通信: 2.兄弟组件通信: 3.跨多层级组件通信: 一.父子通信 父组件通过props传递数据给子组件,子组件通过emit发送事件传递数 ...
- VUE学习-组件通信
vue组件通信 页面传值:$route/${prop} 组件传值: 父组件传值给子组件:参数传值 子组件传值给父组件:给父组件传过来函数传参数:通过插槽的v-slot,绑定参数 组件通信一般分为以下几 ...
- react组件通信那些事儿
父组件是调用组件的组件.现在看来,感觉父组件就是一个壳子,定义好壳子里面会有什么,而子组件是一个具体的实现,说明,会用到什么东西,如果有这些东西,会进行什么操作.总之,父组件是材料,有水和泥,子组件告 ...
- Vue.js 3.x 中跨层级组件如何传递数据?
provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件: 注:上图来自 Vue.js 官网:Prop ...
- 一文搞定Vue2组件通信
vue 组件通信方式 父组件将自己的状态分享给子组件使用: 方法:父组件通过子标签传递数据,子组件通过 props 接收 子组件改变父组件的状态; 方法:父组件在子标签上通过@abc 提供一个改变自身 ...
- vue组件详解(三)——组件通信
组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. 一.自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件. 子组件用$emit ()来触发事件,父组件 ...
- vue组件详解——组件通信
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. ...
随机推荐
- C盘无法创建文件处理
icacls c:\ /setintegritylevel M 打开终端执行上方命令,亲测可用
- 拓展kmp的应用
Smiling & Weeping ---- 我与月亮,进行了一次深夜谈话 它与我谈论太阳,而我与它谈论你. 题目链接:P3435 [POI2006] OKR-Periods of Words ...
- 第1章 Git概述
第1章 Git概述 Git 是一个免费的.开源的分布式版本控制系统,可以快速高效地处理从小型到大型的各种项目. Git 易于学习,占地面积小,性能极快. 它具有廉价的本地库,方便的暂存区域和多个工作流 ...
- E-GraphSAGE: A Graph Neural Network based Intrusion Detection System 笔记
E-GraphSAGE: A Graph Neural Network based Intrusion Detection System 目录 E-GraphSAGE: A Graph Neural ...
- day02 数据类型转换 运算符 方法
数据类型转换 自动类型转换 强制类型转换 1. 自动类型转换:就是范围小的向范围大的转换 将取值范围小刀的类型自动提升为取值范围大的类型. 转换规则 byte.short.char int--- ...
- Java 21 正式 GA,虚拟线程真的来了
UTC 时间 2023 年 9 月 19 日,期盼已久的 Java 21 终于发布正式版! 本文一起来看看其中最受 Java 开发者关注的一项新特性:Loom 项目的两个新特性之一的 "虚拟 ...
- Cplex混合整数规划求解(Python API)
绝对的原创!罕见的Cplex-Python API混合整数规划求解教程!这是我盯了一天的程序一条条写注释一条条悟出来的•́‸ก 一.问题描述 求解有容量限制的的设施位置问题,使用Benders分解.模 ...
- pandas(进阶操作)-- 处理非数值型数据 -- 数据分析三剑客(核心)
博客地址:https://www.cnblogs.com/zylyehuo/ 开发环境 anaconda 集成环境:集成好了数据分析和机器学习中所需要的全部环境 安装目录不可以有中文和特殊符号 jup ...
- 爬虫系列——requests
文章目录 一 介绍 二 基于GET请求 三 基于POST请求 四 响应Response 五 高级用法 一 介绍 介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,reques ...
- Linux系列教程——Shell、Linux文件管理
文章目录 Shell 1.什么是Bash shell(壳) 2.Bash Shell能干什么? 3.平时我们如何使用Shell呢? 4.Shell提示符 5.Shell基础语法 2.Bash Shel ...