【Vue3】refs的使用和vif冲突，undefined“TypeError:Cannotreadproperty‘$refs‘

参考&＃xff1a;

• 使el-form中的el-input自动获取焦点
• https://www.cnblogs.com/rockyjs/p/13974649.html
• https://segmentfault.com/q/1010000021805173
• Vue中在使用v-for或v-if下ref获取DOM不到undefined的问题
• vue 3.0 使用ref获取dom元素
• vue3如何通过ref属性获取元素
• Vue3 中的 $refs 绑定变得这么神奇…
• 子组件通过v-if 来控制显示隐藏与 ref &＃xff0c;DOM渲染的问题&＃xff01;

问题&＃xff1a;

v-if this.$refs无法获取ref的值
出现了报错&＃xff1a;

Error in nextTick: "TypeError: Cannot read property &＃39;$refs&＃39; of undefined"


通过v-if来控制子组件显示隐藏&＃xff0c;然后发现子组件的this.$refs都是undefind.的问题

靠谱的解决方法&＃xff1a;

1. 上策 &＃xff1a;不要使用ref的方法&＃xff0c;而是使用自定义指令->自定义指令 ¹

2. 中策 &＃xff1a;修改业务逻辑&＃xff1a;不要同时使用ref和v-if&＃xff08;这是dom的渲染机制决定的)

3. 下策&＃xff1a;修改业务逻辑&＃xff0c;将v-if改成v-show&＃xff08;v-show和v-if的区别可以自己查下资料&＃xff09;

原因&＃xff1a;

这位大佬说的对&＃xff0c;出现报错的原因是&＃xff1a;

refs不是动态&＃xff0c;需要等页面渲染完成后才能拿到DOM元素

• 这个错误提示很明显是绑定$refs的元素或组件不存在导致的&＃xff0c;建议理清楚业务逻辑再编码&＃xff0c;另外根据你贴的代码图&＃xff0c;你似乎想要调用el-input这个组件的子组件上的focus()方法&＃xff0c;
• 根据element-ui的定义el-input组件是不存在子组件的&＃xff0c;所以你直接以
  this.$refs.target.focus();调用即可&＃xff0c;
• 还有如果你的showInput方法是点击调用的话你大可不必使用nextTick,因为当你想要调用methods时
  你的视图都已渲染完毕。

v-if 和 v-ref 同时出现时&＃xff0c;将会有可能DOM渲染完毕后&＃xff0c;由于v-if是false&＃xff0c;从而没有渲染到v-ref&＃xff0c;导致后续引用为空&＃xff0c;

不信的话你把v-if改成true&＃xff0c;再渲染一下试试&＃xff0c;

• 上一层受v-if的限制&＃xff0c;可能没有显示&＃xff0c;从而导致子节点无法获取&＃xff0c;
• 可以考虑把上一层节点的v-if改成v-show&＃xff0c;
• 或者分析一下为什么父节点没有显示&＃xff0c;从业务逻辑上积极这个问题

另外&＃xff0c;Vue3里&＃xff0c;需要把ref写成下面的形式&＃xff1a;

test.vue

<template><div ref&＃61;"myRef">获取单个DOM元素</div>
</template><script>
import { ref, onMounted } from &＃39;vue&＃39;; //需要引用refexport default {//没有在setup里设定 这步也可以&＃xff0c;直接在函数里调用&＃xff0c;setup() {const myRef &＃61; ref(null); //在setup 时&＃xff08;也就是dom渲染完成后&＃xff09;&＃xff0c;设置ref的值&＃xff0c;然后用return去获取一个ref&＃xff0c;return {myRef};}
};
</script>


或者使用下面的方法&＃xff1a;

【自定义指令官方文档】&＃xff1a;除了核心功能默认内置的指令 (例如 v-model 和 v-show)&＃xff0c;Vue 也允许注册自定义指令

具体的代码实现就是&＃xff0c;在script里面加一个自定义指令&＃xff0c;并且定义指令内容为调用输入的聚焦

<template>
<el-inputv-focusclass&＃61;"input-new-tag"v-if&＃61;"inputVisible"v-model&＃61;"inputValue"ref&＃61;"saveTagInput"size&＃61;"small"&＃64;keyup.enter.native&＃61;"handleInputConfirm"&＃64;blur&＃61;"handleInputConfirm"
>
</el-input>
<el-button v-else class&＃61;"button-new-tag" size&＃61;"small" &＃64;click&＃61;"showInput">&＃43; New Tag</el-button>
</template><script>
export default{directives: {//注册一个局部的自定义指令 v-focusfocus: {// 指令的定义inserted: function (el) {// 聚焦元素el.querySelector(&＃39;input&＃39;).focus()}}}method:{showInput() {this.inputVisible &＃61; true;//不需要下面的ref函数也可以自动聚焦了&＃xff0c;因为这里的element 的输入类型的指令中&＃xff0c;聚焦函数focus()的函数功能 已经被替换为了上面自定义的focus&＃xff08;&＃xff09;函数了&＃xff1a;同理&＃xff0c;上面的template部分的ref也已经可以去掉了/*this.$nextTick(_ &＃61;> {this.$refs.saveTagInput.$refs.input.focus(); //可用了});*/},}
}
</script>

这样在v-if el-input显示以后就会自动聚焦了&＃xff0c;而且也不会再报ref为空的错&＃xff1b; 根本不需要ref了

其他的未经验证的解决方法&＃xff1a;