前言Vue 中组件的使用很方便,而且直接取组件实例的属性方法等也很方便,其中通过 ref 是最普遍的 。
平时使用中主要是对一个组件进行单独设置 ref , 但是有些场景下可能是通过给定数据渲染的 , 这时会结合 v-for 一块使用 。那么在使用的时候具体怎么写?为什么这样写?下面就来探究下 。
一、ref 和 v-for 结合1、ref 简单使用
// html<div ref="testRef"></div>// jsthis.$refs.testRef.xxx2、ref 结合 v-for 使用
<div :ref="'test'+t.code" v-for="t in classList" :key="t.code"></div>在取值时怎么?。客ü?this.$refs['test'+t.code]?
这样取会发现是一个数组,那就去数组中的第一使用(根据经验驱使) , 结果这样是对的 。
this.$refs[`test${t.code}`][0]用是用对了 , 那么为什么要这样用呢?我想在 Vue 源码中一定能够找到答案的 。在 Vue 源码中的确找到了想要的 。
二、Vue 中 ref 注册解析直接在 ./src 下搜索 ref , 搜索到的挺多的,一个个文件打开看了看 , 锁定了一个文件,这个文件就是 ref 的注册代码 。(路径:src\core\vdom\modules\template-ref.ts)
这里主要看下文件中的 registerRef 函数:
【ref 源码解析 Vue ref 和 v-for 结合】export function registerRef(vnode: VNodeWithData, isRemoval?: boolean) {const ref = vnode.data.refif (!isDef(ref)) returnconst vm = vnode.contextconst refValue = https://www.huyubaike.com/biancheng/vnode.componentInstance || vnode.elmconst value = isRemoval ? null : refValueconst $refsValue = isRemoval ? undefined : refValueif (isFunction(ref)) {invokeWithErrorHandling(ref, vm, [value], vm, `template ref function`)return}const isFor = vnode.data.refInForconst _isString = typeof ref ==='string' || typeof ref === 'number'const _isRef = isRef(ref)const refs = vm.$refsif (_isString || _isRef) {// 这里就是 v-for 绑定时的处理if (isFor) {const existing = _isString ? refs[ref] : ref.valueif (isRemoval) {isArray(existing) && remove(existing, refValue)} else {if (!isArray(existing)) {if (_isString) {refs[ref] = [refValue]setSetupRef(vm, ref, refs[ref])} else {ref.value = https://www.huyubaike.com/biancheng/[refValue]}} else if (!existing.includes(refValue)) {existing.push(refValue)}}} else if (_isString) {if (isRemoval && refs[ref] !== refValue) {return}refs[ref] = $refsValuesetSetupRef(vm, ref, value)} else if (_isRef) {if (isRemoval && ref.value !== refValue) {return}ref.value = value} else if (__DEV__) {warn(`Invalid template ref type: ${typeof ref}`)}}}1、函数可以绑定 ref 的值 , 也可以删除
2、根据传入的 node 的 ref 绑定值的类型:string、number、ref、InFor 做不同的处理
3、如果是 InFor 绑定的 ref,会存储成数组的方式
所以,到此从源码中找到 ref 在绑定时 , 如果是通过 v-for 绑定的,那么 ref.value 就是数组,在取值时就要按照数组方式取值了 。
推荐阅读
- 【lwip】07-链路层收发以太网数据帧源码分析
- 含源码 【YOLOv5】手把手教你使用LabVIEW ONNX Runtime部署 TensorRT加速,实现YOLOv5实时物体识别
- 你给文字描述,AI艺术作画,精美无比!附源码,快来试试!
- 空当接龙玩法(空当接龙玩法攻略解析)
- 牛客 python试题解析1 - 入门级
- 可处置的 ref 结构 C# 8.0 中的 Disposable ref structs
- 从源码入手探究一个因useImperativeHandle引起的Bug
- 装配 SpringBoot自动配置流程
- 45.限流Throttling及源码解析
- 硬核剖析ThreadLocal源码,面试官看了直呼内行