VUE2語法中$refs和ref屬性的使用方式
更新時間：2025年10月13日 11:26:36 作者：霧林小妖
在Vue中如何使用$refs和ref屬性來操作DOM和組件實(shí)例,$refs是一個對象,包含由ref屬性注冊的DOM元素和組件實(shí)例,通過$refs可以在Vue中獲取DOM節(jié)點(diǎn)、組件實(shí)例、組件數(shù)據(jù)和屬性等
$refs和ref屬性的使用
1、$refs:一個包含 DOM 元素和組件實(shí)例的對象，通過模板引用注冊。
2、ref實(shí)際上獲取元素的DOM節(jié)點(diǎn)
3、如果需要在Vue中操作DOM我們可以通過ref和$refs這兩個來實(shí)現(xiàn)
總結(jié)：$refs可以獲取被ref屬性修飾的元素的相關(guān)信息。
$refs和ref使用-非組件環(huán)境
$refs f的使用至少需要寫在mounted中，等待組件渲染結(jié)束，否則獲取不到信息。
在下面的案例中，我們將template中的div加入屬性ref=”comp2”,并打算在mounted中獲取相關(guān)的DOM信息。
注意點(diǎn)：這是是沒有使用組件的用法，后面有組件的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app"></div>
<script type="module">
//實(shí)例化vue實(shí)例
const { createApp } = Vue
const app=createApp({
mounted(){
},
template:`
<div>
<div ref="comp2" name="div111">hello vue</div>
</div>
`
});
//vue實(shí)例只作用于app這個DOM節(jié)點(diǎn)中
app.mount('#app');//viewModel是組件幫助我們完成的
</script>
</body>
</html>
獲取名稱為comp2的ref節(jié)點(diǎn)
核心代碼：this.$refs.comp2
mounted(){
console.log(this.$refs.comp2)
},
獲取名稱為comp2節(jié)點(diǎn)中的值
核心代碼：this.$refs.comp2.innerHTML
mounted(){
console.log(this.$refs.comp2)
console.log(this.$refs.comp2.innerHTML)
},
獲取名稱為comp2節(jié)點(diǎn)中屬性的值
核心代碼：this.$refs.comp2.attributes.name
mounted(){
console.log(this.$refs)
console.log(this.$refs.comp2.innerHTML)
//獲取屬性name的值
console.log(this.$refs.comp2.attributes.name)
},
$refs和ref使用-組件環(huán)境
在vue中定義了一個全局組件component2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app"></div>
<script type="module">
//實(shí)例化vue實(shí)例
const { createApp } = Vue
const app=createApp({
mounted(){
console.log(this.$refs)
console.log(this.$refs.comp2.innerHTML)
console.log(this.$refs.comp2.attributes.name)
},
template:`
<div>
< component2 ref="comp" > </component2>
</div>
`
});
//定義一個全局組件
app.component("component2",{
methods:{
event1(){
console.log("======1======");
}
},
data(){
return {
name:"曉春111"
}
},
template:`<div name="div111">hello vue111111111</div> `
});
//vue實(shí)例只作用于app這個DOM節(jié)點(diǎn)中
app.mount('#app');//viewModel是組件幫助我們完成的
</script>
</body>
</html>
獲取到子組件comp的節(jié)點(diǎn)
核心代碼：this.$refs.comp
mounted(){
console.log(this.$refs.comp)
},
獲取到子組件comp的節(jié)點(diǎn)中定義的函數(shù)
核心代碼：this.$refs.comp.event1
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
},
獲取到子組件comp的節(jié)點(diǎn)data中定義的屬性值
核心代碼：this.$refs.comp.name
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
},
獲取到子組件comp的節(jié)點(diǎn)中template的值
核心代碼：this.$refs.comp.$el
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
console.log(this.$refs.comp.$el)
},
獲取到子組件comp的節(jié)點(diǎn)中template中元素屬性的值
核心代碼：this.$refs.comp.$el.attributes.name
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
console.log(this.$refs.comp.$el)
console.log(this.$refs.comp.$el.attributes.name)
},
獲取到子組件comp的節(jié)點(diǎn)中template中元素的值
核心代碼：this.$refs.comp.$el.innerHTML
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
console.log(this.$refs.comp.$el)
console.log(this.$refs.comp.$el.attributes.name)
console.log(this.$refs.comp.$el.innerHTML)
},
獲取到子組件comp的節(jié)點(diǎn)中template中元素的值
核心代碼：this.$refs.comp.$data
$data能夠獲取我們定義在data中的參數(shù)。也就是
data(){
return {
name:"曉春111"
} }的值
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
console.log(this.$refs.comp.$el)
console.log(this.$refs.comp.$el.attributes.name)
console.log(this.$refs.comp.$el.innerHTML)
console.log(this.$refs.comp.$data)
},
獲取子組件comp中template自定義屬性
核心代碼：this.$refs.comp.$options
mounted(){
console.log(this.$refs.comp)
console.log(this.$refs.comp.event1)
console.log(this.$refs.comp.name)
console.log(this.$refs.comp.$el)
console.log(this.$refs.comp.$el.attributes.name)
console.log(this.$refs.comp.$el.innerHTML)
console.log(this.$refs.comp.$data)
console.log(this.$refs.comp.$options)
},
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用jquery滑動到頁面底部的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中使用jquery滑動到頁面底部的實(shí)現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
Uniapp 實(shí)現(xiàn)頂部標(biāo)簽頁切換功能(詳細(xì)步驟)
本文介紹了如何在UniApp中實(shí)現(xiàn)頂部標(biāo)簽頁切換功能,u-tab-bar組件提供了便捷的標(biāo)簽切換功能和豐富的樣式選項(xiàng),而swiper組件則更加靈活,支持自定義切換方式,根據(jù)自己的需求選擇合適的方式實(shí)現(xiàn)頂部標(biāo)簽頁切換,感興趣的朋友一起看看吧2025-02-02
vue實(shí)現(xiàn)關(guān)鍵字高亮效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)關(guān)鍵字高亮效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要介紹了使用Vant完成通知欄Notify的提示操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue使用less報錯:Inline JavaScript is not ena
這篇文章主要介紹了vue使用less報錯:Inline JavaScript is not enabled問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了如何使用vue-router插件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請求）
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請求）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue組件中傳值EventBus的使用及注意事項(xiàng)說明
這篇文章主要介紹了vue組件中傳值EventBus的使用及注意事項(xiàng)說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
詳解vue2.0 使用動態(tài)組件實(shí)現(xiàn) Tab 標(biāo)簽頁切換效果（vue-cli）
本篇文章主要介紹了詳解vue2.0 使用動態(tài)組件實(shí)現(xiàn) Tab 標(biāo)簽頁切換效果（vue-cli），具有一定的參考價值，有需要的可以了解下2017-08-08
v-show 指令通過改變元素的 css 屬性（display）來決定元素是顯示還是隱藏。這篇文章主要介紹了Vue.js 中的 v-show 指令及用法詳解,需要的朋友可以參考下2018-11-11