vue学习日记22:非父子通信(拓展)-provideinject

一、概念

 

 二、实践

代码

 

App

<template><div class="app">我是APP组件<button @click="change">修改数据</button><SonA></SonA><SonB></SonB></div>
</template><script>
import SonA from './components/SonA.vue'
import SonB from './components/SonB.vue'
export default {provide() {return {// 简单类型 是非响应式的color: this.color,// 复杂类型 是响应式的-推荐userInfo: this.userInfo,}},data() {return {color: 'pink',userInfo: {name: '张三',age: 18,},}},methods: {change() {this.color = 'green'// this.userInfo.name = '李四'},},components: {SonA,SonB,},
}
</script><style>
.app {border: 3px solid #000;border-radius: 6px;margin: 10px;
}
</style>

GrandSon 

<template><div class="grandSon">我是GrandSon{{ color.color }} - {{ userInfo.name }} - {{ userInfo.age }}</div>
</template><script>
export default {inject: ['color', 'userInfo'],
}
</script><style>
.grandSon {border: 3px solid #000;border-radius: 6px;margin: 10px;height: 100px;
}
</style>

 SonA

<template><div class="SonA">我是SonA组件<GrandSon></GrandSon></div>
</template><script>
import GrandSon from '../components/GrandSon.vue'
export default {components:{GrandSon}
}
</script><style>
.SonA {border: 3px solid #000;border-radius: 6px;margin: 10px;height: 200px;
}
</style>

 

SonB

<template><div class="SonB">我是SonB组件</div>
</template><script>
export default {}
</script><style>
.SonB {border: 3px solid #000;border-radius: 6px;margin: 10px;height: 200px;
}
</style>

展示

非响应式的数据页面展示的数据不改变,data数据改变

 

-----------------------------------------------------------------------------------------------------------------------------

注:本人是根据黑马程序员的B站教程来学习的,
链接:https://www.bilibili.com/video/BV1HV4y1a7n4/?spm_id_from=333.999.0.0
 

 

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

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

相关文章

Java SDK 使用示例

我们使用同样的 Maven 模板去创建 use-test-sdk 项目&#xff0c;不同的是&#xff0c;我们需要在 use-tset-sdk 下创建一个 lib 文件夹&#xff0c;用来存放 test-sdk.jar 文件。 我们将 test-sdk.jar 拖放到 use-test-sdk/lib 下&#xff0c;然后我们就可以编写代码了&#…

每日OJ题_BFS解决最短路④_力扣675. 为高尔夫比赛砍树

目录 力扣675. 为高尔夫比赛砍树 解析代码 力扣675. 为高尔夫比赛砍树 675. 为高尔夫比赛砍树 难度 困难 你被请来给一个要举办高尔夫比赛的树林砍树。树林由一个 m x n 的矩阵表示&#xff0c; 在这个矩阵中&#xff1a; 0 表示障碍&#xff0c;无法触碰1 表示地面&…

知道XRD标准品PDF卡片号,如何直接导出标准物质数据,简单快速一分钟完成(附jade下载安装方法)

知道XRD标准品PDF卡片号&#xff0c;如何直接导出标准物质数据&#xff08;附jade下载安装方法&#xff09; 网上找到的方法都是先检索再导出&#xff0c;我的样品根本检索不到&#xff0c;但是根据参考文献知道了自己的pdf卡片号&#xff0c;可通过jade直接导出数据 1.请安装…

【Linux】磁盘扩容到根目录逻辑卷(LVM)

目录 一、物理卷和逻辑卷 1.物理卷和逻辑卷的区别 2.在Linux系统中查看所有物理卷的信息 3.在Linux系统中查看所有逻辑卷的信息 二、文件系统 三、实操-对root&#xff08;/&#xff09;目录进行扩容 1.使用lsblk命令查看新加入的磁盘信息 2.fdisk -l命令查看系统中磁盘…

git报错

这里写自定义目录标题 git报错Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 有一个原因就是在github上设置对应密钥时&#xff0c;有一个key获取应该设置为…

【Redis 神秘大陆】005 常见性能优化方式

五、Redis 性能优化 5.1 系统层面的优化 https://github.com/sohutv/cachecloud/blob/main/redis-ecs/script/cachecloud-init.sh initConfig() {# 支持虚拟内存分配sysctl vm.overcommit_memory1# 最大排队连接数设置为 511&#xff0c;一般默认是 128echo 511 >/proc/sy…

男生穿什么裤子最百搭?适合男生穿的裤子品牌测评分享

每个伙伴们想必经常都会选择一些裤子&#xff0c;但现在市面上的裤子品牌也实在太多了&#xff0c;好不容易选到了几件好看的裤子&#xff0c;结果质量却很不好。主要就是因为现在有太多商家为了利润而使用一些舒适性、质量差的面料&#xff0c;那么今天就给大家分享一些质量上…

引导和服务(2)

服务 1.systemd服务的简要介绍 &#xff08;1&#xff09;对比5 6 可以解决依赖关系并行启动 &#xff08;2&#xff09;按需启动 &#xff08;3&#xff09;自动解决依赖关系 负责在系统启动或运行时&#xff0c;激活系统资源&#xff0c;服务器进程和其它进程 2.System…

操作系统(第五周 第一二堂总结)

目录 回顾 前景知识 概述 定义 进程和线程的关系 进程和线程的区别 线程优缺点 优点&#xff1a; 缺点&#xff1a; 易混概念 线程实现方式 线程的类型&#xff1a; ​编辑 多线程模型&#xff1a; 线程函数 头文件&#xff1a; 线程创建函数&#xff1a; 线…

vscode i18n Ally插件配置项

.vscode文件&#xff1a; {"i18n-ally.localesPaths": ["src/lang"], //显示语言&#xff0c; 这里也可以设置显示英文为en,// 如下须要手动配置"i18n-ally.keystyle": "nested", // 翻译路径格式 (翻译后变量格式 nested&#xff1a…

氟化钡与盐酸反应不

结论&#xff1a;反应 氟化钡 名称   中文名称&#xff1a;氟化钡   英文别名&#xff1a;Bariumfluoride 化学式   BaF2 相对分子质量   175.32 性状   无色透明立方结晶或白色粉末。溶于盐酸、硝酸、氢氟酸和氯化铵溶液&#xff0c;微溶于水。 相对密度4.83。 熔…

MongoDB 使用

1 引用依赖包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId></dependency>2 配置文件配置mongodb资料 # MongoDB连接信息 spring.data.mongodb.host 192.168.23.…

(二)使用VS2022克隆下载C++自制植物大战僵尸游戏教程

植物大战僵尸游戏开发教程专栏地址http://t.csdnimg.cn/uzrnw 本文将介绍如何使用VS2022克隆下载《植物大战僵尸C自制版本》。 Gitee项目地址&#xff1a; Gitee仓库地址https://gitee.com/GITLZ/PlantsVsZombies Github项目地址&#xff1a; Github仓库地址https://github…

【JS】querySelectorAll和getElementsByClassName

现有一段代码&#xff0c;li的类名均为item&#xff0c;有一按钮可动态添加类名为item的li。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge…

【C++从练气到飞升】07---内存管理

&#x1f388;个人主页&#xff1a;库库的里昂 ✨收录专栏&#xff1a;C从练气到飞升 &#x1f389;鸟欲高飞先振翅&#xff0c;人求上进先读书。 目录 一、 C/C内存分布 二、 C语言中动态内存管理方式 三、 C中动态内存管理 1. new/delete操作内置类型 2. new和delete操作…

前端二维码工具小程序:营销裂变的好助手

一、摘要 在数字化营销日益盛行的今天&#xff0c;如何以新颖、高效的方式吸引用户&#xff0c;成为了每一个营销者所追求的目标。前端二维码工具小程序&#xff0c;作为一款集二维码生成、AI助手与绘图画画功能于一体的综合性工具&#xff0c;不仅为营销人员提供了全新的思路…

0101tomcat部署war访问mysql失败-容器间通信-docker项目部署

文章目录 一、简介二、部署1、mysql数据迁移2、docker部署redis3、docker部署tomcat并运行war包 三、报错四、解决1 分析2 解决 结语 一、简介 最近参与开发一个项目&#xff0c;其中一部分系统需要迁移。从阿里云迁移到实体服务器&#xff0c;使用docker部署。系统使用Java语…

openssl密钥证书管理(Key and Certificate Management)

前言 前两日应别人要求提供一份CSR文件过去&#xff0c;方便他们生成相关证书&#xff0c;对于这一块本来也不熟&#xff0c;于是找到openssl官网&#xff0c;想找找相关的教程看看&#xff0c;一番小找&#xff0c;果有收获&#xff0c;是个宝藏&#xff0c;源文档在这…

Mysql-模糊匹配度排序分页

Mysql-模糊匹配度排序分页 抛出问题 在使用模糊匹配分页的时候想根据匹配度高进行排序应该如何实现呢&#xff1f; 上面是添加的模拟数据&#xff0c;根据匹配度高的情况下张三的优先级肯定是最高的&#xff0c;首先直接使用模糊搜索分页看看效果吧。 很明显的可以看到&#…

【解决】Spring Boot创建项目常见问题

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;Spring学习之路&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 idea无maven选项 无效发行版17 类⽂件具有错误的版本 61.0, 应为 …