this.$refs获取不到子组件

刺骨的言语ヽ痛彻心扉 2023-02-18 03:27 12阅读 0赞

如下所示：

onReady() {
    		console.log(this.$refs, this.$refs.page);
    	}

**打印结果：**

![20200615234859559.png][]

### **原因：** ###

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

**解决：**

为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 `Vue.nextTick(callback)`。这样回调函数将在 DOM 更新完成后被调用

### 解决1：官网：[异步更新队列][Link 1] ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70][]

### 解决2： ###

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

一般在mounted生命周期中，html已经渲染出，可获取this.$refs

setTimeout(() => {
        this.message = '已更新'
        console.log(this.$el.textContent) // => '未更新'
        this.$nextTick(function () {
          console.log(this.$el.textContent) // => '已更新'
        })
    },0);

updated ：处于数据更新的后

updated() {
        console.log("1:",this.$refs.page)
        this.pageList = this.$refs.page;
    }

延时方法不推荐使用，存在不确定性。

[20200615234859559.png]: https://img-blog.csdnimg.cn/20200615234859559.png
[Link 1]: https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616000403902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g=,size_16,color_FFFFFF,t_70