编辑
2023-03-17
vue
00
请注意,本文编写于 341 天前,最后修改于 161 天前,其中某些信息可能已经过时。

目录

vue的refs作用
主要问题

vue的refs作用

一个包含 DOM 元素和组件实例的对象,通过模板引用注册。

警告

关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

可以理解只能显式的获取关联的组件

主要问题

this.refs.xx.fn获取组件的实例的时候,提示this.refs.xx.fn 获取组件的实例的时候,提示this.refs为undifind,举例:

父组件:Father.vue

js
<template> <div> <button @click="showChild()">点击</button> <child ref="Child" :childVsible="childVsible"/> </div> </template> <script> import child from './Child'; export default { components: { child }, data() { return { childVsible: false, //默认隐藏子组件 } }, methods:{ showChild(){ this.childVsible = true; this.$refs.test(); } } </script>

子组件:Child.vue

js
<template> <div ref="Child"> <div>我是你爸爸</div> </div> </template> <script> import child from './Child'; export default { methods:{ test(){ console.log("我才是你爸爸!!") } } </script>

这个时候点击 点击 按钮会提示undefind,为什么呢?应该是refs还没加载出来,所以取不到(待确认),这时候加一个$nextTick即可解决问题,修改父组件的showChild方法

js
methods:{ showChild(){ this.childVsible = true; this.$nextTick(() => { this.$refs.test(); }); } }
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:Joker

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!