快捷導(dǎo)航

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ù)和屬性等

獲取到子組件comp的節(jié)點(diǎn)
獲取到子組件comp的節(jié)點(diǎn)中定義的函數(shù)
獲取到子組件comp的節(jié)點(diǎn)data中定義的屬性值
獲取到子組件comp的節(jié)點(diǎn)中template的值
獲取到子組件comp的節(jié)點(diǎn)中template中元素屬性的值
獲取到子組件comp的節(jié)點(diǎn)中template中元素的值
獲取到子組件comp的節(jié)點(diǎn)中template中元素的值
獲取子組件comp中template自定義屬性

總結(jié)

$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)
      },