文章目录
专栏介绍：
凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的，随着 Vue 框架不断的被认可，现如今的 Vue 框架已经是前端工程师必备的技能了，记得尤大大开发 Vue 的初衷，为了让自己的开发工作更加便捷，也希望这个框架能让更多人的开发工作变得轻松；现如今 Vue 框架做到了，尤大大做到了，当然在 20 年的 9 月 18 日，Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布！如今已经过去了两年多的时间，更多的公司选择了Vue3技术，所以凉哥也在这个时候为大家出这份专栏，本专栏将帮助大家掌握Vue3+TS技术，提升自己竞争力！访问链接订阅 👉 Vue3通透教程【从零到一】，订阅后联系作者加入专属社群！
温故知新：
上篇文章中我们我们学会了通过defineProps和defineEmits两个函数来实现我们父子组件的通讯，其实在我们的日常开发中我们往往组件中不仅仅是父子关系的需要通讯比如爷孙关系的组件，甚至跨好级的组件进行通讯我们该如何做呢？这篇文章就来带领大家实现跨级组件通讯；让我们 let’s coding！
下面两个函数，引用的是官方文档的介绍，可能你不太明白什么意思，没关系，简单的了解一下，然后看一下我们下面的综合小案例你就能够完全明白是什么了！
provide函数提供一个值，可以被后代组件注入。provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。与注册生命周期钩子的 API 类似，provide() 必须在组件的 setup() 阶段同步调用。我们来看一下用法；
provide函数既可以提供一个要注入的变量，也可以是提供一个要注入的方法；
<script setup>
import { provide, ref } from 'vue';
import son from './son.vue'
let num = ref(0)
const fun = () => {
console.log('888')
}
provide('num', num)//变量
provide('chage', fun)//方法
</script>
注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。第一个参数是注入的 key。Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject() 将返回 undefined，除非提供了一个默认值。第二个参数是可选的，即在没有匹配到 key 时使用的默认值。它也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。如果默认值本身就是一个函数，那么你必须将 false 作为第三个参数传入，表明这个函数就是默认值，而不是一个工厂函数。与注册生命周期钩子的 API 类似，inject() 必须在组件的 setup() 阶段同步调用。
inject 函数既可以将上级组件链中通过 provide 函数提供的值进行注入，注入后可以使用可以是变量可以是方法的调用；
<script setup>
import { inject } from 'vue';
let num = inject('num')
const fun = inject('chage')
fun()
</script>
上面我们看到了实现跨组件通讯的 provide、inject 两个函数的基本使用和概念，那你可能对上面的概念还是懵的，没有关系，我们这就通过一个综合的案例来串联一下；首先我们还是以点赞功能为例；首先呢我会创建三个盒子分别为 盒子=》子盒子=》孙子盒子；
1）首先将初始化赞数数量0传递给孙子（跨级向子级传递数据）；
2）孙子级中进行接收数据并展示，而且要通过孙子级的按钮来改变顶级的数据；（跨级向上级传递数据）；
//最高层级app.vue
<template>
<div style="width: 400px;height: 400px; background: aquamarine;">
<p>高级</p>
<son></son>
</div>
</template>
<script setup>
import { provide, ref } from 'vue';
import son from './son.vue'
let num = ref(0)
const fun = (val) => {
num.value += val
}
provide('num', num)//变量
provide('chage', fun)//方法
</script>
//中级son.vue
<template>
<div style="width: 300px;height: 300px; background: pink;">
中级
<grandson></grandson>
</div>
</template>
<script setup>
import grandson from './grandson.vue'
</script>
//最低级grandson.vue
<template>
<div style="width: 200px;height: 200px; background: bisque;">
低级<br />
总赞数{{ num }}
<button @click="zan">赞+10</button>
</div>
</template>
<script setup>
import { inject } from 'vue';
let num = inject('num')
const fun = inject('chage')
const zan = () => {
fun(10)
}
</script>
相信你通过上面的一个小案例掌握了跨级组件通讯了吧；通过两个函数将最高层的数据传给最底层，有通过点击最底层的按钮触发了最高层的方法改变了数据，我们可以从最底层直接修改数据嘛？不行的，只有谁定义的谁来修改，赶快来动手试试看吧！各位小伙伴让我们 let’s coding！
本期推荐
✨ 原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下
👍 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！
我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？ 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本，你可以这
我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("
1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，
在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的，针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜，提出了全新的资源管理框架YARN. ApacheYARN（YetanotherResourceNegotiator的缩写）是Hadoop集群的资源管理系统，负责为计算程序提供服务器计算资源，相当于⼀个分布式的操作系统平台，⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现，但是因为具有⾜够的通⽤性，同样可以⽀持其他的分布式计算模
我今天看到了一个ruby代码片段。[1,2,3,4,5,6,7].inject(:+)=>28[1,2,3,4,5,6,7].inject(:*)=>5040这里的注入(inject)和之前看到的完全不一样，比如[1,2,3,4,5,6,7].inject{|sum,x|sum+x}请解释一下它是如何工作的？ 最佳答案 没有魔法，符号(方法)只是可能的参数之一。这是来自文档:#enum.inject(initial,sym)=>obj#enum.inject(sym)=>obj#enum.inject(initial){|mem
有什么方法可以告诉sidekiq一项工作依赖于另一项工作，并且在后者完成之前无法开始？ 最佳答案 仅使用Sidekiq；答案是否定的。正如DickieBoy所建议的那样，您应该能够在依赖作业完成时将其启动。像这样。#app/workers/hard_worker.rbclassHardWorkerincludeSidekiq::Workerdefperform()puts'Doinghardwork'LazyWorker.perform_async()endend#app/workers/lazy_worker.rbclassLaz
我是Ruby新手，并被要求在我们的新项目中使用它。我们还被要求使用Padrino(Sinatra)作为后端/框架。我们被要求使用Rspec进行测试。我一直在寻找可以指导在Padrino上使用RspecforRuby的教程。我得到的主要是引用RoR。但是，我需要RubyonPadrino。请在任何入门/指南/引用/讨论等方面指导我。如有不妥之处请指正。可能是我没有针对我的问题搜索正确的词/短语组合。我正在使用Ruby1.9.3和Padrinov.0.10.6。注意:我还提到了SOquestion,但它没有帮助。 最佳答案 我没用过Pa
Ruby中防止SQL注入(inject)的好方法是什么？ 最佳答案 直接使用ruby？使用准备好的语句:require'mysql'db=Mysql.new('localhost','user','password','database')statement=db.prepare"SELECT*FROMtableWHEREfield=?"statement.execute'value'statement.fetchstatement.close 关于ruby-防止SQL注入(inject