1. 概述

首因效应告诉我们：

在日常交往中，第一印象是非常重要的，好的第一印象能让我们在与人相处时事半功倍。

但也从另一面告诉我们，不能仅凭第一印象去判断一个人，有时虚假的第一印象，也有可能蒙蔽我们的双眼，影响我们的判断，正所谓“路遥知马力，日久见人心”。

言归正传，今天我们来聊聊 VUE 中 ref、provide、inject 的使用。

2.  ref、provide、inject

2.1 使用 ref 获取 dom 元素

  1. <body>
  2.     <div id="myDiv"></div>
  3. </body>
  4. <script>
  5.    const app = Vue.createApp({
  6.         mounted() {
  7.             console.info(this.$refs.div1)
  8.             this.$refs.div1.innerHTML = 'hello';
  9.         },
  10.         template:`
  11.             <div>
  12.                 <div ref="div1">
  13.  
  14.                 </div>
  15.             </div>
  16.         `
  17.    });
  18.    const vm = app.mount("#myDiv");
  19. </script>

在 VUE 中，获取 dom 元素就是这么简单，在想获取的 dom 元素上增加属性 ref="标识名称"，然后在方法中使用 this.$refs.标识名称 ，即可获取该 dom 元素

注意：使用 this.$ref.标识名称 获取 dom 元素时，必须是在 dom 元素渲染完成后，也就是说，必须是在 mounted 周期方法中获取 或是 元素渲染完成后，使用触发方法获取

2.2 使用 ref 获取子组件

  1.     const app = Vue.createApp({
  2.         mounted() {
  3.             this.$refs.myCom.method1();
  4.         },
  5.         template:`
  6.             <div>
  7.                 <my-com ref="myCom" />
  8.             </div>
  9.         `
  10.     });
  11.     app.component("my-com", {
  12.         methods : {
  13.             method1 () {
  14.                 alert("hello");
  15.             }
  16.         },
  17.         template: `
  18.             <div>
  19.                 component1
  20.             </div>
  21.         `
  22.    });

ref 的另一个功能，就是获取子组件对象

该例中主组件使用子组件时使用 <my-com ref="myCom" /> 的写法，给组件添加了 标识名称 myCom，

然后在方法中使用 this.$refs.myCom.method1(); 得到子组件对象，并调用了子组件中的方法。

2.3 多组件参数传递

如果有一个参数，需要从父组件传递到子组件，然后子组件再传递给子子组件，根据我们之前学的知识，可以这么写

  1.     const app = Vue.createApp({
  2.         data(){
  3.             return {
  4.                 num : 1
  5.             }
  6.         },
  7.         template:`
  8.             <div>
  9.                 <my-com-1 :num="num" />
  10.             </div>
  11.         `
  12.     });
  13.     app.component("my-com-1", {
  14.         props:["num"],
  15.         template: `
  16.             <my-com-2 :num="num" />
  17.         `
  18.    });
  19.    app.component("my-com-2", {
  20.         props:["num"],
  21.         template: `
  22.             <div>
  23.                 {{num}}
  24.             </div>
  25.         `
  26.    });

这样写的确可以实现，但似乎不太优雅，所有的子组件都需要接收参数，并再往下传递，这里有一个更好的写法

2.4 多组件参数传递优化

  1.    const app = Vue.createApp({
  2.         data(){
  3.             return {
  4.                 num : 1
  5.             }
  6.         },
  7.         provide() {
  8.             return {
  9.                 num_2 : this.num
  10.             }
  11.         },
  12.         template:`
  13.             <div>
  14.                 <my-com-1 />
  15.             </div>
  16.         `
  17.     });
  18.  
  19.     app.component("my-com-1", {
  20.         template: `
  21.             <my-com-2 />
  22.         `
  23.    });
  24.  
  25.    app.component("my-com-2", {
  26.         inject:["num_2"],
  27.         template: `
  28.             <div>
  29.                 {{num_2}}
  30.             </div>
  31.         `
  32.    });

这样写就优雅多了，只需要在父组件使用 provide 传参，在需要使用数据的子组件，使用 inject 接收即可

注意：使用 provide 、inject 的方式传参，当父组件的 num 发生改变时，页面不会重新渲染，至于如何重新渲染，在后面的文章中会有介绍。

3. 综述

今天聊了一下 VUE3 的 ref、provide、inject 的使用，希望可以对大家的工作有所帮助，下一节我们开始讲 Vue 中 动画 的相关知识，敬请期待

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。

4. 个人公众号

追风人聊Java，欢迎大家关注

VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂，适合新手的更多相关文章

  1. VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂，适合新手

    1. 概述 光环效应告诉我们: 当一个人在某一方面取得了巨大的成功,人们就会给他贴上正面的标签,这个人从此就被"优秀"的光环所笼罩,他做的一切,人们都认为是正确的. 例如:越是名气 ...

  2. VUE3 之 多个 v-model 绑定及 v-model 修饰符的使用 - 这个系列的教程通俗易懂，适合新手

    1. 概述 洛克定律告诉我们: 当我们的目标很远大,远到我们都看不到终点时,放弃几率就会很大,就像跑马拉松比赛,由于时间长.距离长,很多选手都会选择在中途放弃. 其实有个好办法,就是拆分,把大目标拆分 ...

  3. VUE3 之 插槽的使用 - 这个系列的教程通俗易懂，适合新手

    1. 概述 非理性定律告诉我们: 人们总是习惯于以情感去判断眼前的事物,非理性的去做决定. 对于长远的利益,人们更愿意去选择短期的利益. 因此在做决定前要让自己冷静,理性的分析,让自己看的更远. 言归 ...

  4. VUE3 之 作用域插槽 - 这个系列的教程通俗易懂，适合新手

    1. 概述 破窗效应告诉我们: 当一个建筑物窗户的玻璃完好无损时,很少有人想去破坏它,当有一个人破坏了一块窗户的玻璃,其他窗户的玻璃也很快会被人破坏. 同理,一个很干净的地方,人们不好意思去丢垃圾,但 ...

  5. VUE3 之 动态组件 - 这个系列的教程通俗易懂，适合新手

    1. 概述 暗示效应告诉我们: 巧妙的暗示会在不知不觉中剥夺我们的判断力,对我们的思维形成一定的影响,造成我们行为的些许改变或者偏差. 例如你的朋友说你脸色不太好,是不是病了,此时,你可能就会感觉浑身 ...

  6. VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手

    1. 概述 巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...

  7. VUE3 之 使用标签实现动画与过渡效果（下） - 这个系列的教程通俗易懂，适合新手

    1. 概述 毛毛虫效应: 有这样一个实验,将许多毛毛虫放在一个花盆边缘,使它们首尾相接,围成一个圈.然后在离花盆很近的地方撒了一些毛毛虫的食物. 此时,毛毛虫并不会向食物的方向爬去,而是在花盆边缘,一 ...

  8. VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂，适合新手

    1. 概述 老话说的好:过去不等于未来,过去成功了不代表将来也会成功,过去失败了也不代表将来也会失败. 言归正传,今天我们聊聊多个元素之间的过渡. 2. 多个元素之间的过渡 2.1 两个元素交替显示 ...

  9. VUE3 之 列表动画 - 这个系列的教程通俗易懂，适合新手

    1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1  列表中增加和删除元素 <style> .my-ite ...

随机推荐

  1. CSS基础 精灵图的使用

    使用步骤1.创建盒子     <div class="one"></div>   2.使用PxCook量取图标大小,将图标的宽高设置成为盒子的宽高      ...

  2. Python之路 - Day4 - Python基础4 (新版)

    本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 孩子,我现在有个需 ...

  3. 第10组 Beta冲刺 (2/5)

    1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14015412.html ·作业博客:https://edu.cnblogs.co ...

  4. LINUX学习--nginx服务器的安装

    一.安装环境 操作系统CentOS6.8 关闭SeLinux和iptables防火墙 二.网络yum源 将下面的软件下载到  /etc/yum.repos.d/   的目录下 官方基础:http:// ...

  5. Java实现二叉搜索树的插入、删除

    前置知识 二叉树的结构 public class TreeNode { int val; TreeNode left; TreeNode right; TreeNode() { } TreeNode( ...

  6. 使用redis+lua实现SQL中的select intersect的效果

    公众号文章地址 1.需求 业务中需要实现在两个集合中搜索数据,并返回交集. 用SQL的伪代码可以描述如下: select key from set1 where sorted_key between ...

  7. 【感受】android + opencv + umat + opencl使用感受

    近期编译了android下支持opencl的opencv,使用opencl能力的关键是用cv::UMat替换cv::Mat. 实际使用后发现坑很多,非常不成熟,不推荐使用这种方式来提升实际产品的性能. ...

  8. Anaconda 创建 32位python虚拟环境

    Anaconda 创建 32位python虚拟环境 ​ 最近实习在做一个接口自动化数据上传的功能,因为数据是更新的,需要每次上传都查询数据库调用匹配,就不得不面对 python 连接 oracle . ...

  9. 三张图秒懂Redis集群设计原理

    转载Redis Cluster原理 转载https://blog.csdn.net/yejingtao703/article/details/78484151 redis集群部署方式: 单机 主从 r ...

  10. Linux下安装confluence汉化破解版

    Atlassian Confluence(简称Confluence)是一个专业的wiki程序.它是一个知识管理的工具,通过它可以实现团队成员之间的协作和知识共享.Confluence 不是一个开源软件 ...