---

前言

如果我們需要直接訪問組件中的底層DOM元素，可使用vue提供特殊的ref屬性來訪問

---

1.訪問模板引用

1. 在視圖元素中采用ref屬性來設(shè)置需要訪問的DOM元素
   a. 該ref屬性可采用字符值的執(zhí)行設(shè)置
   b. 該ref屬性可采用v-bind:或:ref的形式來綁定函數(shù)，其函數(shù)的第一個(gè)參數(shù)則為該元素
2. 如果元素的ref屬性值采用的是字符串形式
   a. 在選項(xiàng)式 API JS中，可通過this.$refs來訪問模板引用
   b. 在組合式 API JS中，我們需要聲明一個(gè)同名的ref變量，來獲得該模板的引用

訪問模板引用【選項(xiàng)式】

<script>
export default {data: () => ({accountEl: null,passwordEl: null}),methods: {changeAccountInputStyle() {this.accountEl = this.$refs.account // 獲取賬號(hào)輸入框的 DOMconsole.log(this.accountEl)this.accountEl.style = "padding: 15px"this.accountEl.className = "rounded"this.accountEl.focus()},passwordRef(el) { this.passwordEl = el  // el 元素是密碼輸入框},changePasswordInputStyle() {console.log(this.passwordEl) console.log(this.$refs) // 函數(shù)式聲明的 ref，不會(huì)在this.$refs中獲取this.passwordEl.style = "padding: 15px"this.passwordEl.className = "rounded"this.passwordEl.focus()},}
}
</script><template><!-- ref 字符串值形式 -->賬號(hào)輸入框：<input type="text" ref="account"><button @click="changeAccountInputStyle">改變賬號(hào)輸入框的樣式</button><hr><!-- ref 函數(shù)形式：元素渲染后，會(huì)立即執(zhí)行該函數(shù) -->密碼輸入框：<input type="password" :ref="passwordRef"><button @click="changePasswordInputStyle">改變密碼輸入框的樣式</button>
</template><style>
.rounded {border-radius: 15px;
}
</style>

訪問模板引用【組合式】

<script setup>
import { ref } from 'vue';// 賬號(hào)輸入框
let account = ref(null) // ref 變量名和賬號(hào)輸入框中的 ref 屬性值一樣function changeAccountInputStyle() {console.log(account.value)account.value.style = 'padding: 10px'account.value.className = 'rounded'account.value.focus()
}// ------------------------------------------------------------------------// 密碼輸入框元素
let passwordEl = ref(null)function passwordRef(el) {passwordEl.value = el // el 元素是密碼輸入框
}function changePasswordInputStyle() {console.log(passwordEl.value)passwordEl.value.style = 'padding: 10px'passwordEl.value.className = 'rounded'passwordEl.value.focus()
}
</script><template><!-- ref 字符串值形式 -->賬號(hào)輸入框：<input type="text" ref="account"><button @click="changeAccountInputStyle">改變賬號(hào)輸入框的樣式</button><hr><!-- ref 函數(shù)形式：元素渲染后，會(huì)立即執(zhí)行該函數(shù)-->密碼輸入框：<input type="password" :ref="passwordRef"><button @click="changePasswordInputStyle">改變密碼輸入框的樣式</button>
</template><style>
.rounded {border-radius: 15px;
}
</style>

2.v-for中的模板引用

當(dāng)在v-for中使用模板引用時(shí)：

1. 如果ref值是字符串形式，在元素被渲染后包含對(duì)應(yīng)整個(gè)列表的所有元素【數(shù)組】
2. 如果ref值是函數(shù)形式，則會(huì)每渲染一個(gè)列表元素則會(huì)執(zhí)行對(duì)應(yīng)的函數(shù)【不推薦使用】

注意：需要v3.2.25及以上版本

列表渲染指令中的模板引用【選項(xiàng)式】

<script>
export default {data: () => ({books: [{ id: 1, name: '紅樓夢(mèng)' },{ id: 2, name: '三國演義' },{ id: 3, name: '水滸傳' },{ id: 4, name: '西游記' }],students: [{ id: 1, name: 'Jack' },{ id: 2, name: 'Annie' },{ id: 3, name: 'Tom' }]}),methods: {changeBookListStyle() {console.log(this.$refs.bookList)this.$refs.bookList[2].style = 'color: red'},studentsRef(el) {console.log(el)}}
}
</script><template><ul><!-- 如果 ref 值是字符串形式，在元素被渲染后包含對(duì)應(yīng)整個(gè)列表的所有元素【數(shù)組】 --><li v-for="b in books" :key="b.id" ref="bookList">{{ b.name }}</li></ul><button @click="changeBookListStyle">點(diǎn)我查看 bookList </button><hr><!-- 如果ref值是函數(shù)形式，則會(huì)每渲染一個(gè)列表元素則會(huì)執(zhí)行對(duì)應(yīng)的函數(shù)【不推薦使用】 --><ul><li v-for="s in students" :key="s.id" :ref="studentsRef">{{ s.name }}</li></ul>
</template>

列表渲染指令中的模板引用【組合式】

<script setup>
import { onMounted, ref } from 'vue';// 書本
let books = ref([{ id: 1, name: '海底兩萬里' },{ id: 2, name: '駱駝祥子' },{ id: 3, name: '老人與海' },{ id: 4, name: '安徒生童話' },
])let bookList = ref(null)onMounted(() => {console.log(bookList.value); // 獲取引用的 DOM 對(duì)象，并打印，發(fā)現(xiàn)那么是數(shù)組，bookList.value[2].className = 'error'
})
</script><template><ul><li v-for="b in books" :key="b.id" ref="bookList">{{ b.name }}</li></ul>
</template><style>
.error {border: 1px solid red;
}
</style>

3.組件上的ref

模板引用也可以被用在一個(gè)子組件上；這種情況下引用中獲得的值是組件實(shí)例

1. 如果子組件使用的是選項(xiàng)式 API ，默認(rèn)情況下父組件可以隨意訪問該子組件的數(shù)據(jù)和函數(shù)，除非在子組件使用expose選項(xiàng)來暴露特定的數(shù)據(jù)或函數(shù)，expose值為字符串?dāng)?shù)組
2. 如果子組件使用的是組合式 API

App.vue【選項(xiàng)式】

<script>
import LoginVue from './components/Login.vue';
export default {components: { LoginVue },data: ()=> ({login_vue: null}),methods: {showSonData() {console.log(this.login_vue.account) // 訪問子組件中的賬號(hào)數(shù)據(jù)console.log(this.login_vue.password) // 訪問子組件中的密碼數(shù)據(jù)this.login_vue.toLogin() // 訪問子組件中的去登陸函數(shù)}},mounted(){this.login_vue = this.$refs.loginView}
}
</script><template><h3>登陸界面</h3><hr><!-- 組件上的 ref 的值為該組件的實(shí)例 --><LoginVue ref="loginView" /><hr><button @click="showSonData">查看子組件中的信息</button>
</template>

Login.vue【選項(xiàng)式】

<script>
// 選項(xiàng)式 API ，默認(rèn)情況下父組件可以隨意訪問該子組件的數(shù)據(jù)和函數(shù)等
export default {data: ()=> ({account: 'Abc31510',password: '123321'}),methods: {toLogin() {console.log('登錄中……');}},// 只暴露指定數(shù)據(jù)、函數(shù)等expose: ['account', 'toLogin']
}
</script><template>賬號(hào)：<input type="text" v-model="account"><br>密碼：<input type="text" v-model="password">
</template>