vue3 基础-补充 ref & provide-inject
本篇主要对一些被以前内容(渲染, 传值) 等忽略的几个常用小技巧进行补充说明啦.
v-once
即对某个dom节点生效, 其会限定只会渲染一次, 不论数据是如何的变化, 演示如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-once</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// v-once: 只能渲染一次哦
const app = Vue.createApp({
data () {
return { count: 1 }
},
template: `
<div @click="count += 1" v-once>
{{count}}
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
只要加上了这个 v-once 指令, 就只能渲染一次啦, 这在一些输入框, 密码框校验, 性能优化等都有应用哦.
ref
其主要应用在响应式数据获取的场景, 实际功能是获取 真实 dom 节点 或 组件引用的一个语法, 后面我们会细讲, 就这里先抛砖引玉一下先.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ref 获取 dom 节点</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// ref: 获取 dom 节点
const app = Vue.createApp({
data () {
return { count: 1 }
},
mounted () {
this.$refs.count.innerHTML = 'youge'
},
template: `
<div>
<div ref="count">
{{count}}
</div>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
这里的 ref 其实就是对数据 count 的一个响应式包装, 使页面加载完后 (mounted) 能够获取到这个 count 相关的dom节点, 进行内容改变和响应式渲染.
但这种 DOM 操作其实非常不建议, 一个是会带来性能问题, 另一个是维护成本的问题.
ref 的另外一种用途是可以获取子组件的引用, 演示如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ref 获取子组件的引用</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// ref 获取子组件的引用
const app = Vue.createApp({
mounted () {
this.$refs.mySon.sayHi()
},
template: `
<div>
<Son ref="mySon" />
</div>
`
})
app.component('Son', {
methods: {
sayHi () {
console.log('hi~')
}
}
})
const vm = app.mount('#root')
</script>
</body>
</html>
这里父组件在调用子组件 Son 的时候, 通过 ref 就可以将子组件包裹在 mySon 这个自定义对象中, 然后在父组件中就可以通过 this.$refs.myson.xxx 的方式来调用子组件的内容啦.
当然这种方式也是不推荐的, 就有点乱和不容易维护, 同时也会带来性能的问题哦.
provice 和 inject
这个 cp 组合主要能解决多层组件传值的问题, 跨过山和大海, 一步到位. 我们先来看如果没有它, 多层组件传值应该是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<title>多层组件传值</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// 多层组件传值
const app = Vue.createApp({
data () {
return { count: 1 }
},
template: `
<div>
<son :count=count />
</div>
`
})
// 第一层属性传值
app.component('son', {
props: ['count'],
template: `<grandson :count="count" />`
})
// 第二层属性传值
app.component('grandson', {
props: ['count'],
template: `<div>{{count}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
会发现这种嵌套传值, count 的层层传递, 如果这么一直下去有点搞死人. 因此为了解决这种场景, vue 就设计了一对 cp 的语法组合, 即可 "provide -> inject".
例如我们这里想要将父组件的数据 count 直接一步到位给到 grandson , 而不通过 son 来弄:
<!DOCTYPE html>
<html lang="en">
<head>
<title>多层组件传值</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// 多层组件传值
const app = Vue.createApp({
data () {
return { count: 1 }
},
// 通过 provide 将 data () 中的数据传递
provide () {
return {
cj: this.count
}
},
template: `
<div>
<son />
</div>
`
})
// 中间层不用管, 让 provide 跨过山河大海
app.component('son', {
template: `<grandson />`
})
// 哪一层需要用则 直接 inject 注入
app.component('grandson', {
inject: ['cj'],
template: `<div>{{cj}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
其核心就是这里:
data () { return { count: 1 } },
// 通过 provide 将 data () 中的数据传递
provide () {
return {
cj: this.count
}
// 余下任何子或多层的组件想要用到这个 cj 数据通过 inject: ['cj'] 即可
需要注意的是这里遗留了一个响应式数据问题, 就如上写法只能 provide 一次, 后面当 data ( ) 数据变化时候, provide 是不会响应式的啦. 如果要解决就后面结合 ref, reacitve 等内容啦, 这里先这样吧.
小结
- v-once 指令的作用是让该 dom 只能渲染一次哦
- ref 能够获取 dom 节点和组件的引用, 同时能实现响应式数据渲染
- provide - inject 的组合能解决多层的数据传递问题, 一步到位, 没有中间商赚差价
vue3 基础-补充 ref & provide-inject的更多相关文章
- Vue3 中的组件 provide和inject 传值、获取组件实例的方法getCurrentInstance()
一. provide和inject(依赖注入) 1:在父级组件中提供数据 语法:provide('提供给子组件的变量名',提供给子组件的数据) 2: 在子级组件中获取收据 ...
- Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解
先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...
- 小项目中vuex使用频率不太多我们完全可以用provide inject 来代替可以让项目小不少
在一般小型项目中vuex实在是太浪费了所以我们可以用到 vue中的provide inject 代替 1.在vue3中我们先另起一个 文件创建一个全局的状态和方法的地方(如果你的全局状态特别的多记得要 ...
- 聊聊 Vue 中 provide/inject 的应用
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
- 【笨木头Lua专栏】基础补充04：迭代器初探
今天学习的内容还蛮有意思的,让我兴奋了一下~ 笨木头花心贡献,哈?花心?不,是用心~ 转载请注明,原文地址: http://www.benmutou.com/archives/1714 文章来源:笨木 ...
- ROS_Kinetic_20 ROS基础补充
ROS_Kinetic_20 ROS基础补充 1 手动创建ROS功能包 参考官网:http://wiki.ros.org/cn/ROS/Tutorials/Creating%20a%20Package ...
- vue高级组件之provide / inject
转载:https://blog.csdn.net/Garrettzxd/article/details/81407199 在vue中不同组件通信方式如下 1.父子组件,通过prop 2.非父子组件,通 ...
- vue中的provide/inject的学习
在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项.用于父级组件向下传递数据.provide/inject:简单的来说就是在父组件(或者曾祖父组件)中通过pro ...
- vue 初步了解provide/inject
provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. 需要注意的是 provide / inject这对选项需要一起使用, ...
- 【代码笔记】Java常识性基础补充(一)——赋值运算符、逻辑运算符、三元运算符、Scanner类、键盘输入、Random类、随机数
为什么要进行Java常识性基础补充? 之前学习Java语言,学得很多很杂,而且是很多不同的方面插入讲解的,比如在跟班上课,自学java编程例子,java语法,过了很久,因为各种原因长时间不怎么写,有时 ...
随机推荐
- (抄自己luogu上的博客)莫队总结
虽然当时文风很2,但是觉得写的蛮好的,就在这里贴一下吧. 最近学了分块(太难想了 \(qwq\) )和莫队(太神奇了 \(0w0\) ),写一个阶段性总结~ 分块 总所周知,分块是一种神奇的暴力,用 ...
- Android应用禁止屏幕休眠的3种方法
做android应用开发时,有时需要在应用前台运行时,禁止休眠,以下几种方法供参考. 方法一:持有wakelock 添加休眠锁,休眠锁必须成对出现. private wakelock mwakeloc ...
- @Scheduled参数及cron表达式解释
@Scheduled支持以下8个参数:1.cron:表达式,指定任务在特定时间执行:2.fixedDelay:表示上一次任务执行完成后多久再次执行,参数类型为long,单位ms:3.fixedDela ...
- MySQL - [18] mysql中关于cascade的用法
drop database语句用于删除数据库.但如果想要删除一个数据库并且还要删除所有依赖于该数据库的存储过程.函数等,可以使用cascade关键字.drop database test cascad ...
- 开源一款数据转换扩展板-FreakStudio多米诺系列
原文链接: FreakStudio的博客 摘要 数据转换板通过I2C接口进行信号采集和输出,支持最多16通道输入和2通道输出.具备860Hz采样率和50KHz输出频率,采用16位ADC和12位DAC芯 ...
- Sqoop增量导入注意事项 incremental lastmodified与target-dir连用报错 Imported Failed: Wrong FS
这里引用一篇博客 写的很好 https://blog.csdn.net/C_time/article/details/101109071
- Ollama+DeepSeek+SlackBot
技术背景 想必最近有在部署DeepSeek大模型的人,看标题就知道这篇文章在做什么事情了.由于Ollama对于IP的监听缺乏安全防护,并且内网部署的Ollama模型对于外网来说也是不可见的,而如果使用 ...
- 基于近红外与可见光双目摄像头的活体人脸检测，文末附Demo
基于近红外与可见光双目摄像头的活体人脸检测原理 人脸活体检测(Face Anti-Spoofing)是人脸识别系统中的重要一环,它负责验证捕捉到的人脸是否为真实活体,以抵御各种伪造攻击,如彩色纸张打印 ...
- Anaconda使用记录
1 安装 windows下,安装完添加环境变量(哦安装时勾选添加环境变量选项就是加这些变量的) ## (记anaconda软件目录为%ANACONDA3%) %ANACONDA3%\ %ANACOND ...
- 【P0】Logisim部件级实验/有限状态机
课上 过得十分狼狈.经鉴定孩子可能脑子拗 T1 投票决议 组内投票,赞成>反对,则通过:组长拥有一票否决权. 信号名 方向 描述 [1:0] s Input 2'b00 赞成2'b01 反对2' ...