雖然 Vue 的聲明(míng)性渲染模型爲你(nǐ)抽象了(le)大(dà)部分對(duì) DOM 的直接操作(zuò)，但(dàn)在某些(xiē)情況下(xià)，我們仍然需要直接訪問底層 DOM 元素。要實現(xiàn)這(zhè)一點，我們可以使用(yòng)特殊的 ref attribute：
template
<input ref="input">
ref 是一個特殊的 attribute，和(hé) v-for 章節中提到(dào)的 key 類似。它允許我們在一個特定的 DOM 元素或子組件實例被挂載後，獲得對(duì)它的直接引用(yòng)。這(zhè)可能(néng)很(hěn)有用(yòng)，比如說在組件挂載時(shí)将焦點設置到(dào)一個 input 元素上(shàng)，或在一個元素上(shàng)初始化一個第三方庫。
訪問模闆引用(yòng)
挂載結束後引用(yòng)都會(huì)被暴露在 this.$refs 之上(shàng)：
vue
<script>
export default {
mounted() {
this.$refs.input.focus()
}
}
</script>
<template>
<input ref="input" />
</template>
注意，你(nǐ)隻可以在組件挂載後才能(néng)訪問模闆引用(yòng)。如果你(nǐ)想在模闆中的表達式上(shàng)訪問 $refs.input，在初次渲染時(shí)會(huì)是 null。這(zhè)是因爲在初次渲染前這(zhè)個元素還不存在呢(ne)！
v-for 中的模闆引用(yòng)
需要 v3.2.25 及以上(shàng)版本
當在 v-for 中使用(yòng)模闆引用(yòng)時(shí)，相應的引用(yòng)中包含的值是一個數組：
vue
<script>
export default {
data() {
return {
list: [
/* ... */
]
}
},
mounted() {
console.log(this.$refs.items)
}
}
</script>
<template>
<ul>
<li v-for="item in list" ref="items">
{{ item }}
</li>
</ul>
</template>
應該注意的是，ref 數組并不保證與源數組相同的順序。
函數模闆引用(yòng)
除了(le)使用(yòng)字符串值作(zuò)名字，ref attribute 還可以綁定爲一個函數，會(huì)在每次組件更新時(shí)都被調用(yòng)。該函數會(huì)收到(dào)元素引用(yòng)作(zuò)爲其第一個參數：
template
<input :ref="(el) => { /* 将 el 賦值給一個數據屬性或 ref 變量 */ }">
注意我們這(zhè)裏需要使用(yòng)動态的 :ref 綁定才能(néng)夠傳入一個函數。當綁定的元素被卸載時(shí)，函數也(yě)會(huì)被調用(yòng)一次，此時(shí)的 el 參數會(huì)是 null。你(nǐ)當然也(yě)可以綁定一個組件方法而不是内聯函數。
組件上(shàng)的 ref
這(zhè)一小(xiǎo)節假設你(nǐ)已了(le)解組件的相關知(zhī)識，或者你(nǐ)也(yě)可以先跳過這(zhè)裏，之後再回來(lái)看(kàn)。
模闆引用(yòng)也(yě)可以被用(yòng)在一個子組件上(shàng)。這(zhè)種情況下(xià)引用(yòng)中獲得的值是組件實例：
vue
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
mounted() {
// this.$refs.child 是 <Child /> 組件的實例
}
}
</script>
<template>
<Child ref="child" />
</template>
如果一個子組件使用(yòng)的是選項式 API ，被引用(yòng)的組件實例和(hé)該子組件的 this 完全一緻，這(zhè)意味着父組件對(duì)子組件的每一個屬性和(hé)方法都有完全的訪問權。這(zhè)使得在父組件和(hé)子組件之間創建緊密耦合的實現(xiàn)細節變得很(hěn)容易，當然也(yě)因此，應該隻在絕對(duì)需要時(shí)才使用(yòng)組件引用(yòng)。大(dà)多數情況下(xià)，你(nǐ)應該首先使用(yòng)标準的 props 和(hé) emit 接口來(lái)實現(xiàn)父子組件交互。
expose 選項可以用(yòng)于限制對(duì)子組件實例的訪問：
js
export default {
expose: ['publicData', 'publicMethod'],
data() {
return {
publicData: 'foo',
privateData: 'bar'
}
},
methods: {
publicMethod() {
/* ... */
},
privateMethod() {
/* ... */
}
}
}
在上(shàng)面這(zhè)個例子中，父組件通過模闆引用(yòng)訪問到(dào)子組件實例後，僅能(néng)訪問 publicData 和(hé) publicMethod。
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發