如果閱讀有疑問的話，歡迎評論或私信！！
本人會很熱心的闡述自己的想法！謝謝！！！

模板引用

前言

在前面學(xué)過的 v-on v-if v-show 等指令都是對DOM操作的抽象指令，而有時我們需要直接訪問底層DOM元素。例如在我們剛掛載完組件實例時，想要將一個input輸入框聚焦。參照之前的知識好像無法完成，在該章節(jié)我們可以使用vue提供的ref屬性。我們稱為模板引用。

語法：

<input ref="input">

訪問模板引用

掛載結(jié)束后，ref屬性都會被暴露在this.$refs之上，例如我們之前的場景：

<template><p>Ask a yes/no question:<input v-model="some.nested.question" :disabled="loading"  ref="myInput"/><button @click="some.nested.question = 'b?'">點我</button></p><p>{{ answer }}</p>
</template>
<script>export default {mounted() {this.$refs.myInput.focus()}
}
</script>

注意，這里ref屬性值只有在掛載之后才可以被訪問，在掛載之間一直是undefined狀態(tài)。因為我們的DOM在掛載前還沒有被渲染，也就是ref還沒有通知給引擎。例如

<script>export default {created(){this.$refs.myInput.focus();}
}
//Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
</script>

模板引用與v-if、v-show的結(jié)合

我們通過上面可以知道ref屬性只有在被渲染之后才可以訪問到其中的值，那么我們可以聯(lián)想到前面所講的v-if和v-show的知識。如果我們ref所在的DOM元素包含v-if或者v-show會產(chǎn)生什么樣的結(jié)果呢？結(jié)合我們學(xué)習(xí)到的知識，我覺得應(yīng)該v-if會拋出錯誤，v-show不會拋出錯誤，因為兩個的渲染機制不一樣。例如：

<template><p><input v-model="some.nested.question" :disabled="loading"  ref="myInput" v-if="flag"/> <!--  Uncaught TypeError: Cannot read properties of undefined (reading 'focus') --><input v-model="some.nested.question" :disabled="loading"  ref="myInput2" v-show="flag"/><button @click="flag = !flag">更改input顯示/隱藏</button></p>
</template>
<script>export default {data(){return{flag:false}},mounted() {this.$refs.myInput.focus();this.$refs.myInput2.focus();}
}
</script>

可以看出結(jié)果和我們預(yù)料的一樣，只有v-if才會報錯。

v-for中的模板引用

官方文檔中解釋了在對v-for中使用模板引用時，$refs中該屬性是一個數(shù)組，也就是我們可以對其使用數(shù)組的方法。例如：

<template><ul><li v-for="currentValue in myArr" ref="items">{{ currentValue.myNumber }}</li></ul></p>
</template><script>
export default {data() {var myArr = [{myNumber: 1},{myNumber: 2},{myNumber: 3},{myNumber: 4},];return {myArr};},mounted() {console.log(this.$refs.items); //(4) [li, li, li, li]},
};
</script>

在上方代碼中我們可以看出this.$refs.items會輸出一個數(shù)組，那么我們可以使用this.$refs.items[0]訪問得到第一個元素。

但是官方文檔說不保證this.$refs.items與源數(shù)組相同的順序。也就是我們在使用這個方法時需要查看一下是不是該元素，也可以使用數(shù)組中的indexOf來查找位置之后再使用該方法。

函數(shù)模板引用

對于ref中的值，我們可以是任意字符串，在mounted中使用this.$refs來引用。如果我們想要將這個DOM元素傳入一個屬性或者一個方法，我們可以使用函數(shù)模板引用。例如：

<button  :ref="(el)=>{console.log(el)}">按鈕</button> //<!-- <button>按鈕</button> -->

在使用函數(shù)模板引用時，ref是一個動態(tài)屬性，需要使用v-bind來綁定。當(dāng)綁定的元素被卸載時，函數(shù)也會被調(diào)用一次，此時的 el 參數(shù)會是 null。你當(dāng)然也可以綁定一個組件方法而不是內(nèi)聯(lián)函數(shù)。