vue中關于this.refs為空出現原因及分析

更新時間：2023年05月19日 09:13:56 作者：27℃涼白開

這篇文章主要介紹了vue中關于this.refs為空出現原因及分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue關于this.refs為空出現原因分析

場景

在使用vue過程中，本想調用子組件的數據，但嘗試多次一直獲取失敗。

經過分析有以下原因

這里寫圖片描述

1、在生命周期mounted之前的鉤子函數中去調用會獲取不到，原因是DOM節(jié)點都沒有生成。

2 、this.refs的組件在v-if為false的父節(jié)點下，導致這個子組件未渲染，所以獲取不到。

注意

一定是組件已經渲染成功才能調用組件的數據。而不是頁面加載完成后就一定能獲取到

vue this.$refs的使用

案例一、ref 寫在標簽上時

<!-- ref 寫在標簽上時：this.$refs.名字  獲取的是標簽對應的dom元素
     ref 寫在組件上時：這時候獲取到的是 子組件（比如counter）的引用-->
    <div id="root">
        <!-- ref = 'hello'： 給div 起了一個引用的名字 hello -->
        <div
            ref = 'hello'
            @click = "handleClick">
            laugh yourself
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            methods: {
                handleClick: function() {
                    //this.$refs : 獲取整個Vue實例中所有的引用 然后再找到hello這個引用 指向div那個dom節(jié)點
                    //console.log(this.$refs.hello)
                    alert(this.$refs.hello.innerHTML)
                }
            }
        })
    </script>

案例二、 ref 寫在組件上時

計數：

<!-- ref 寫在標簽上時：this.$refs.名字  獲取的是標簽對應的dom元素
     ref 寫在組件上時：這時候獲取到的是 子組件（比如counter）的引用-->
    <div id="root">
        <!-- 子組件觸發(fā)了事件 這里父組件(模板區(qū)里面)監(jiān)聽該事件 調用handleChange方法 
                                    因此handleChange方法定義在父組件的methods里面-->
        <counter ref="one" @change="handleChange"></counter>
        <counter ref="two" @change="handleChange"></counter>
        <div>{{total}}</div>
    </div>
    <script>
        Vue.component('counter', {
            template: '<div @click="handleClick"> {{number}} </div>',
            data: function() {
                return {
                    number: 0
                }
            },
            methods: {
                handleClick: function() {
                    this.number ++
                    //子組件向父組件傳值  子組件被點擊的時候 number+1  同時告訴外面 也即是觸發(fā)一個事件
                    this.$emit('change')
                }
            },
        })
        var vm = new Vue({
            el: '#root',
            data: {
                total: 0
            },
            methods: {
                handleChange: function() {
                    //在此方法中計算兩個數量的和  通過this.$refs.引用名字 獲取兩個子組件的引用
                    this.total = this.$refs.one.number +
                                    this.$refs.two.number
                }
            }
        })
    </script>