vue快速入门(四十一)组件通信-依赖注入

news2024/11/23 21:09:24

注释很详细,直接上代码

上一篇

新增内容

  1. 祖先组件向下传值
  2. 子代组件接受数据

源码

App.vue

<template>
  <div id="app">
    <sonComponent></sonComponent>
  </div>
</template>
<script>
import sonComponent from "./components/sonComponents.vue";

export default {
  name: "App",
  components: {
    sonComponent,
  },
  //温馨提醒,该属性不具备响应式
  //传递给后代的数据(这种方法无法直接使用data的数据)
  /*provide:{
    name:'代码对我眨眼睛111',
    age:18
  },*/
  //传递给后代的数据(这种方法可以使用data的数据)
  //使用时需注意结构
  provide() {
    return{
      providedData: this.providedData,
    }
  },
  data() {
    return {
      name: "代码对我眨眼睛",
      age: 38
    };
  },
  computed:
  { 
    providedData() {
      return {
        name: this.name,
        age: this.age,
      };
    },
  },
  methods: {},
};
</script>
<style></style>

sonComponents.vue

<template>
  <div>
    <h1>子组件</h1>
    <p>姓名:{{ providedData.name }}</p>
    <grandsonComponent></grandsonComponent>
  </div>
</template>

<script>
import grandsonComponent from "./grandsonComponents.vue";
export default {
  components: {
    grandsonComponent,
  },
  //注入父组件的name属性(即接收祖先组件传下来的数据)
  inject: ["providedData"],
};
</script>

<style lang="less" scoped></style>

grandsonComponents.vue

<template>
    <div>
        <h3>孙组件</h3>
        <p>年龄:{{providedData.age}}</p>
    </div>
</template>

<script>
    export default {
        // 注入父组件的属性
        inject:["providedData"]
    }
</script>

<style lang="less" scoped>

</style>

效果演示

在这里插入图片描述

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

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

相关文章

广东海洋大学成功部署(泰迪智能科技)大数据人工智能实验室建设

广东海洋大学简称广东海大&#xff0c;坐落于广东省湛江市&#xff0c;是国家海洋局与广东省人民政府共建的省属重点建设大学、广东省高水平大学重点学科建设高校、粤港澳高校联盟成员 &#xff0c;入选卓越农林人才教育培养计划&#xff0c;是教育部本科教学水平评估优秀院校。…

隋总分享的Temu蓝海项目究竟能不能做?

在当前的互联网经济大潮中&#xff0c;跨境电商作为一个新兴的商业模式&#xff0c;吸引了众多创业者和投资者的目光。其中&#xff0c;Temu作为拼多多旗下的跨境电商平台&#xff0c;凭借其独特的模式和强大的背景&#xff0c;成为了不少人心中的蓝海项目。近日&#xff0c;网…

java中线程的生命周期和线程安全

目录 生命周期 线程安全 生命周期 在Java中&#xff0c;线程的生命周期可以分为以下几个状态&#xff1a; 新建状态&#xff08;New&#xff09;&#xff1a; 当线程对象被创建后&#xff0c;它就处于新建状态。此时线程对象已经在内存中了&#xff0c;但是还没有开始执行。…

提升效率与质量:钣金加工行业设备数据采集的重要性

钣金加工作为制造业的重要一环&#xff0c;在现代工业中扮演着举足轻重的角色。随着市场竞争的日益激烈&#xff0c;钣金加工企业必须不断提升生产效率和产品质量&#xff0c;以应对市场的挑战。在这一背景下&#xff0c;设备数据采集变得尤为重要&#xff0c;因为它可以帮助企…

Dapp智能合约开发搭建

随着区块链技术的飞速发展&#xff0c;去中心化应用&#xff08;Dapp&#xff09;逐渐崭露头角&#xff0c;成为金融科技领域的一股新势力。而在Dapp中&#xff0c;智能合约发挥着不可或缺的作用。本文将从专业角度深入探讨Dapp智能合约的概念、优势、挑战以及未来发展趋势&…

Service: Amazon S3; Status Code: 403; Error Code: AccessDenied

1、使用minio报错 Access Denied. (Service: Amazon S3; Status Code: 403; Error Code: AccessDenied; Request ID: 17C8C89ED481E74E; S3 Extended Request ID: dd9025bab4ad464b049177c95eb6ebf374d3b3fd1af9251148b658df7ac2e3e8; Proxy: null) 2、将Access Policy值改为…

Bentley二次开发教程17-文件及模型管理-模拟输入调用命令

对于目前使用C#在Addin框架编程来说&#xff0c;对于某些方法可能封装的并不是十分完全&#xff0c;或者说目前的MicroStation软件中的原生功能可以完美的实现业务需求&#xff0c;但是需要对其进行参数化&#xff0c;自动化并进行重复工作&#xff0c;那么模拟输入调用命令的方…

Redis入门到通关之Redis实现Session共享

文章目录 ☃️前期概要☃️基于Session实现登录方案☃️现有方案存在的问题☃️Redis代替Session的业务流程❄️❄️设计key的结构❄️❄️设计key的具体细节❄️❄️整体访问流程 欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 请回答1024的博…

CSS基础:width,height尺寸属性详解

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。云桃桃&#xff0c;大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端工具”&#xff0c;可获取 Web…

C++中的stack(容器适配器)

目录 一、成员函数 一、构造函数 二、入栈 三、出栈 四、判空 empty () 五、栈大小 size 六、取栈顶元素 top 七、入栈 emplace 八、交换函数 swap 二、非成员函数重载 一、关系运算符重载 二、交换函数 C中的stack不再是容器&#xff0c;而是容器适配器 注意&a…

详解汽车充电桩主板的硬件设计与软件系统

随着电动汽车时代的到来&#xff0c;充电桩逐渐成为城市新地标。而在每一个充电桩的核心&#xff0c;隐藏着一颗强大的“心脏”——充电桩主板。 充电桩主板是充电桩的核心部件&#xff0c;决定着充电桩的充电效率、安全和用户体验。今天&#xff0c;我们将深入探索汽车充电桩主…

ubuntu18.04安装F4PGA教程

环境搭建教程&#xff1a; f4pga-arch-defs/xilinx/xc7 at main f4pga/f4pga-arch-defs GitHub git clone https://github.com/SymbiFlow/f4pga-arch-defs.git cd f4pga-arch-defs make env cd build 主要是make env&#xff0c;会下载很多东西&#xff0c;然后生成很多描…

账号安全基本措施2

sudo命令 sudo(superuser do)&#xff0c;允许系统管理员让普通用户执行一些或者全部的root命令的一个工具。 其配置在/etc/sudoers权。它允许系统管理员集中的管理用户的使用权限和使用的主机。属性必须为0440。 语法检查&#xff1a; 检查语法&#xff1a; 修改文件时&…

Mysql学习一

目录 1.启动数据库&#xff1a; 2.命令行连接到MySQL&#xff08;winr输入cmd&#xff09; 3.MySQL的三重结构&#xff1a; 4.SQL语句分类&#xff1a; 1.启动数据库&#xff1a; winr——输入services.msc进入本地服务 2.命令行连接到MySQL&#xff08;winr输入cmd&#x…

【Linux】学习记录_14_线程

14 线程 14.1 线程和进程 进程是资源管理的最小单位&#xff0c;每个进程都有数据段、代码段和堆栈段&#xff0c;进程切换时都有复杂的上下文切换等动作。进程切换上下文时&#xff0c; 需要重新映射虚拟地址空间、进出OS内核、寄存器切换&#xff0c;还会干扰处理器的缓存机…

关于agi中的Function Calling深入解析

接口(Interface) 两种常见接口&#xff1a; 1、人机交互接口&#xff0c;User Interface,简称UI 2、应用程序编程接口&#xff0c;Application Programming Interface,简称API 接口能【通】的关键&#xff0c;是两边都要遵守约定。 人要按照UI的设计来操作。UI的设计要符合…

easyexcel升级3.3.4失败的经历

原本想通过easyexcel从2.2.6升级到3.3.3解决一部分问题&#xff0c;结果之前的可以用的代码&#xff0c;却无端的出现bug 1 Sheet index (1) is out of range (0…0) 什么都没有改&#xff0c;就出了问题&#xff0c;那么问题肯定出现在easyexcel版本自身.使用模板填充的方式进…

从构成看自来水厂自动化控制系统的创新与发展

自来水厂自动化控制系统涵盖了多个关键组成部分&#xff0c;包括水管理云平台、供水监控系统以及供水调度平台。 系统内嵌了一系列自主创新的核心算法&#xff0c;这些算法结合了数学建模、机器仿真和流体力学等多元数据模型&#xff0c;以优化设备间的关联和控制关系&#xf…

top实时系统监控工具-读书笔记(十一)

top 是 Linux 系统中一个非常实用的实时系统监控工具&#xff0c;它可以实时显示系统中各个进程的资源使用情况&#xff0c;包括 CPU 占用率、内存占用量、进程运行状态等信息。 命令格式 top 的基本格式如下&#xff1a; top [选项] 常用选项及其作用 -d 或 --delsay&…

Php-WebView 现代跨平台 GUI分享

GitHub :php-webview 一个用于 C/C 的小型跨平台 Web 视图库&#xff0c;用于构建现代跨平台 GUI。 该项目的目标是为最广泛使用的平台创建一个通用的 HTML5 UI 抽象层。 它支持双向 JavaScript 绑定&#xff08;从 C/C 调用 JavaScript 和从 JavaScript 调用 C/C&#xff09;。…