vue中的inject和provide

在Vue中,provide 和 inject 是用来实现祖先组件向子孙组件传递数据的一种高级组件通信方式。provide 可以在祖先组件中定义数据,而 inject 可以在子孙组件中接收这些数据。这种传递方式不受组件层级限制,非常适合于跨多层级的组件通信。

用法案例

父级组件


<template>
  <div>
    <div>我是父级组件</div>
    <Child/>
  </div>
</template>

<script>
import Child from './child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
    message:'父组件信息'
    }
  },
  provide() {
    return { $_parent: this };
  },
  methods:{
     getMessage(){
       alert('message')
      }
  }
}
</script>

<style></style>

child组件

<template>
  <div>
    <button @click="getInfo">获取父组件信息</div>
  </div>
</template>

<script>
export default {
  name: 'child',
  data() {
    return {
    }
  },
  inject: ['$_parent'],
   methods:{
     getInfo(){
     console.log(this.$_parent.message)
      this.$_parent.getMessage()
     }
  }
}
</script>

<style></style>

当然你也可以在App.vue中定义provide,这样provide中的方法和属性在其他页面中都可以访问

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

steam加速器哪个好 2024最新steam好用加速器推荐

steam加速器哪个好 2024最新steam好用加速器推荐 对于热爱游戏的玩家们来说&#xff0c;steam这个游戏平台对于大家来说肯定不陌生&#xff0c;但是由于平台服务器的原因&#xff0c;我们在大陆登录平台经常会出现卡顿掉线等原因&#xff0c;那么今天小编就为大家带来可以流畅…

Redis入门到通关之解决Redis缓存一致性问题

文章目录 ☃️概述☃️数据库和缓存不一致采用什么方案☃️代码实现☃️其他 ☃️概述 由于我们的 缓存的数据源来自于数据库, 而数据库的 数据是会发生变化的, 因此,如果当数据库中 数据发生变化,而缓存却没有同步, 此时就会有 一致性问题存在, 其后果是: 用户使用缓存中的过…

python-使用bottle时间简易服务器

python-使用bottle时间简易服务器 背景调试读取文本所有内容字段解释json字符串解析追加写入文件 整理后整理后写入文件方法将目录下所有文本的内容批量追加到一个文本搜索字符串方法实现简易服务器通过浏览器访问 背景 202310.txt内容是一段json字符串&#xff0c;目的是通过…

MySQL连接查询之等值连接

连接查询 又称多表查询&#xff0c;当查询结果来自多张数据表的时候&#xff0c;就需要用到连接查询。 建一个新库包含两张表实验&#xff08;ta&#xff1a;id&#xff0c;age字段&#xff0c;tb&#xff1a;id&#xff0c;name&#xff0c;ta_id&#xff09;&#xff1a; …

基于SpringBoot的“人职匹配推荐系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“人职匹配推荐系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 网上商城购物系统结构图 管理员登录界面图 个…

WebKit内核游览器

WebKit内核游览器 基础概念游览器引擎Chromium 浏览器架构Webkit 资源加载这里就不得不提到http超文本传输协议这个概念了&#xff1a; 游览器多线程HTML 解析总结 基础概念 百度百科介绍 WebKit 是一个开源的浏览器引擎&#xff0c;与之相对应的引擎有Gecko&#xff08;Mozil…

CTFHUB RCE作业

题目地址&#xff1a;CTFHub 完成情况如图&#xff1a; 知识点&#xff1a; preg_match_all 函数 正则匹配函数 int preg_match_all ( string $pattern , string $subject [, array &$matches [, int $flags PREG_PATTERN_ORDER [, int $offset 0 ]]] )搜索 subject 中…

rust学习(BorrowMut异常)

现象&#xff1a; 编译没有问题&#xff0c;运行时出现&#xff1a; 代码&#xff1a; pub fn do_test() {let v Arc::new(RefCell::new(100));let v1 v.try_borrow_mut().unwrap();let v2 v.try_borrow_mut().unwrap(); } 原因&#xff1a; 一个cell貌似不能同时被借用…

实际案例分享:如何利用上位机优化生产过程

在现代工业生产中&#xff0c;利用上位机进行生产过程优化已成为一种常见的做法。通过实时监控、数据采集和远程控制&#xff0c;上位机可以帮助企业提高生产效率、降低成本&#xff0c;并实现生产过程的自动化和智能化。本文将通过一个实际案例来介绍如何利用上位机优化生产过…

Nature 哈佛新型超材料Metafluid粘度、透明度、弹性可变,可用于编程液压机器人

液体都有“智能”、可编程了&#xff1f; 最近&#xff0c;一种被称为“智能"液体的多功能可编程的新型超材料——Metafluid&#xff0c;登上了Nature。 它由哈佛大学SEAS的研究团队研发&#xff0c;据说可自由调节弹性、光学特性、粘度。 甚至能够在牛顿流体和非牛顿流…

RHCE第二次作业

一.配置server主机要求如下&#xff1a; 1.server主机的主机名称为 ntp_server.example.com 2.server主机的IP为&#xff1a; 172.25.254.100 3.server主机的时间为1984-11-11 11&#xff1a;11&#xff1a;11 4.配置server主机的时间同步服务要求可以被所有人使用 二.设定cli…

【Python】异常处理结构

文章目录 1.python异常2.try_except异常处理结构3.try... 多个except异常处理4.try_except_else异常处理结构5.try_except_finally异常处理结构6.常见报错类型 在运行代码时&#xff0c;总是遇到各种异常&#xff0c;且出现异常时&#xff0c;脚本就会自动的的停止运行&#xf…

网络编程day5

目录 使用select实现TCP并发服务器 使用poll实现TCP客户端 UDP实现网络聊天室 服务器 ser.h main.c func_ser.c makefile 客户端 cli.h main.c func_cli.c makfile 思维导图 使用select实现TCP并发服务器 #include <myhead.h> int main(int argc, const c…

Create AI大会|人人皆可成为开发者,探索人工智能新趋势

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的速度渗透到我们生活的方方面面。2024年4月16日&#xff0c;备受瞩目的Create 2024百度AI开发者大会在深圳国际会展中心&#xff08;宝安&#xff09;盛大开幕。大会以“创造未来”为主题…

47.基于SpringBoot + Vue实现的前后端分离-校园外卖服务系统(项目 + 论文)

项目介绍 本站是一个B/S模式系统&#xff0c;采用SpringBoot Vue框架&#xff0c;MYSQL数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SpringBoot Vue技术的校园外卖服务系统设计与实现管理工作…

人才测评的方法有哪些?

人才测评是企业在筛选人才的时候必然会使用的策略&#xff0c;为了节省企业HR在招聘时的成本&#xff0c;又极大提高了人才和岗位的匹配度&#xff0c;从企业发展和员工个人发展来看&#xff0c;起到了双赢的作用&#xff0c;在线人才测评是现代企业招聘&#xff0c;人才选拔&a…

力扣哈哈哈哈

public class MyStack {int top;Queue<Integer> q1;Queue<Integer> q2;public MyStack() {q1new LinkedList<Integer>();q2new LinkedList<Integer>();}public void push(int x) {q2.offer(x);//offer是入队方法while (!q1.isEmpty()){q2.offer(q1.pol…

如何通过Postgres的日志进行故障排查?

文章目录 一、配置日志记录二、查看和分析日志三、使用日志进行故障排查的示例四、总结 在进行数据库管理和维护时&#xff0c;日志分析是一项至关重要的技能。PostgreSQL的日志记录功能可以帮助我们追踪数据库的运行状态&#xff0c;定位问题&#xff0c;以及优化性能。下面&a…

51单片机入门_江协科技_33~34_OB记录的自学笔记_LED呼吸灯与PWM直流马达调速

33. 直流电机驱动(PWM) 33.1. 直流电机介绍 •直流电机是一种将电能转换为机械能的装置。一般的直流电机有两个电极&#xff0c;当电极正接时&#xff0c;电机正转&#xff0c;当电极反接时&#xff0c;电机反转 •直流电机主要由永磁体&#xff08;定子&#xff09;、线圈&…

如何规划数据中台

1. 数据中台是一套解决方案 数据中台是一套可持续“让企业数据用起来”的机制&#xff0c;是一套解决方案&#xff0c;不仅是一个平台。让数据更加灵活地支撑前端业务&#xff0c;通过持续沉淀企业数据复用能力形成数据从采集、治理、开发到数据服务的一整套数据使用的机制。 …