vue中關(guān)于this.refs為空出現(xiàn)原因及分析

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

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

vue關(guān)于this.refs為空出現(xiàn)原因分析

場(chǎng)景

在使用vue過程中，本想調(diào)用子組件的數(shù)據(jù)，但嘗試多次一直獲取失敗。

經(jīng)過分析有以下原因

這里寫圖片描述

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

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

注意

一定是組件已經(jīng)渲染成功才能調(diào)用組件的數(shù)據(jù)。而不是頁(yè)面加載完成后就一定能獲取到

vue this.$refs的使用

案例一、ref 寫在標(biāo)簽上時(shí)

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

案例二、 ref 寫在組件上時(shí)

計(jì)數(shù)：

<!-- ref 寫在標(biāo)簽上時(shí)：this.$refs.名字  獲取的是標(biāo)簽對(duì)應(yīng)的dom元素
     ref 寫在組件上時(shí)：這時(shí)候獲取到的是 子組件（比如counter）的引用-->
    <div id="root">
        <!-- 子組件觸發(fā)了事件 這里父組件(模板區(qū)里面)監(jiān)聽該事件 調(diào)用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 ++
                    //子組件向父組件傳值  子組件被點(diǎn)擊的時(shí)候 number+1  同時(shí)告訴外面 也即是觸發(fā)一個(gè)事件
                    this.$emit('change')
                }
            },
        })
        var vm = new Vue({
            el: '#root',
            data: {
                total: 0
            },
            methods: {
                handleChange: function() {
                    //在此方法中計(jì)算兩個(gè)數(shù)量的和  通過this.$refs.引用名字 獲取兩個(gè)子組件的引用
                    this.total = this.$refs.one.number +
                                    this.$refs.two.number
                }
            }
        })
    </script>