vue的$refs是什麼意思

在vue中，$refs是一個物件，持有註冊過ref attribute的所有DOM元素和元件範例。ref被用來給元素或子元件註冊參照資訊，參照資訊將會註冊在父元件的「$refs」物件上；如果在普通的DOM元素上使用，參照指向的就是DOM元素；如果用在子元件上，參照就指向元件範例。

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

Vue中的$refs

$refs是一個物件，持有註冊過ref attribute的所有DOM元素和元件範例。

描述

ref被用來給元素或子元件註冊參照資訊，參照資訊將會註冊在父元件的$refs物件上，

如果在普通的DOM元素上使用，參照指向的就是DOM元素；
如果用在子元件上，參照就指向元件範例；

另外當v-for用於元素或元件的時候，參照資訊將是包含DOM節點或元件範例的陣列。【相關推薦：、】

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <div ref="node">Node</div>
        <layout-div ref="layout"></layout-div>
        <div v-for="i in 3" :key="i" ref="nodearr">{{i}}</div>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
    Vue.component("layout-div", {
      data: function(){
          return {
            count: 0
          }
      },
      template: `<div>
                    <div>{{count}}</div>
                </div>`
    })
 
    var vm = new Vue({
        el: '#app',
        mounted: function(){
            console.log(this.$refs.node); // <div>Node</div> // DOM元素
            console.log(this.$refs.layout); // VueComponent {_uid: 1, ...} // 元件範例
            console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素陣列
        }
    })
</script>
</html>
登入後複製

因為ref本身是作為渲染結果被建立的，在初始渲染的時候是不能存取的，因為其還不存在，而且$refs也不是響應式的，因此不應該試圖用它在模板中做資料繫結，在初始化存取ref時，應該在其生命週期的mounted方法中呼叫，在資料更新之後，應該在$nextTick方法中傳遞迴撥操作來獲取元素或範例，此外一般不推薦直接操作DOM元素，儘量使用資料繫結讓MVVM的ViewModel去操作DOM。

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
 
    var vm = new Vue({
        el: '#app',
        data: function(){
            return {
                msg: 0
            }
        },
        template:  `<div>
                       <div ref="node">{{msg}}</div>
                       <button @click="updateMsg">button</button>
                    </div>`,
        beforeMount: function(){
            console.log(this.$refs.node); // undefined
        },
        mounted: function(){
            console.log(this.$refs.node); // <div>0</div>
        },
        methods: {
            updateMsg: function(){
                this.msg = 1;
                console.log(this.$refs.node.innerHTML); // 0
                this.$nextTick(() => {
                    console.log(this.$refs.node.innerHTML); // 1
                })
            }
        }
    })
</script>
</html>
登入後複製

VUE中$refs的基本用法

ref 有三種用法：

　　1、ref 加在普通的元素上，用this.$refs.（ref值）獲取到的是dom元素

　　2、ref 加在子元件上，用this.$refs.（ref值）獲取到的是元件範例，可以使用元件的所有方法。在使用方法的時候直接this.$refs.（ref值）.方法（）就可以使用了。

　　3、如何利用 v-for 和 ref 獲取一組陣列或者dom 節點

應注意的坑：

1、如果通過v-for 遍歷想加不同的ref時記得加 :號，即 :ref =某變數 ;
這點和其他屬性一樣，如果是固定值就不需要加 :號，如果是變數記得加 :號。（加冒號的，說明後面的是一個變數或者表示式；沒加冒號的後面就是對應的字串常數（String））

2、通過 :ref =某變數 新增ref（即加了:號） ,如果想獲取該ref時需要加 [0]，如this.$refs[refsArrayItem] [0]；如果不是:ref =某變數的方式而是 ref =某字串時則不需要加，如this.$refs[refsArrayItem]。

1、ref 需要在dom渲染完成後才會有，在使用的時候確保dom已經渲染完成。比如在生命週期 mounted(){} 勾點中呼叫，或者在 this.$nextTick(()=>{}) 中呼叫。

2、如果ref 是迴圈出來的，有多個重名，那麼ref的值會是一個陣列 ，此時要拿到單個的ref 只需要迴圈就可以了。

例子1:

新增ref屬性

<div id="app">
    <h1 ref="h1Ele">這是H1</h1>
    <hello ref="ho"></hello>
 
    <button @click="getref">獲取H1元素</button>
</div>
登入後複製

獲取註冊過 ref 的所有元件或元素

methods: {
        getref() {
          // 表示從 $refs物件 中, 獲取 ref 屬性值為: h1ele DOM元素或元件
           console.log(this.$refs.h1Ele.innerText);
           this.$refs.h1ele.style.color = 'red';// 修改html樣式
 
          console.log(this.$refs.ho.msg);// 獲取元件資料
          console.log(this.$refs.ho.test);// 獲取元件的方法
        }
      }
登入後複製

例子2:

Vue程式碼：

 <!-- 列表部分 -->
                <el-table @sort-change="sortChange" ref="multipleSelection" border :data="valueDryGoodTableData" style="width: 100%">
                    <el-table-column align="left" prop="title" label="標題" min-width="80%" sortable="custom">
                        <template slot-scope="scope">
                            <a target="_blank" :class="scope.row.titleClicked?'titleClicked':''" class="hoverHand bluetext" v-html="scope.row.title" @click="titleClick(scope.row.articleUrl,scope.$index)">
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" prop="releaseTime" label="釋出日期" min-width="11%" sortable="custom"></el-table-column>
                    <el-table-column align="center" label="操作" min-width="9%">
                        <template slot-scope="scope">
                            <span class="operatoryTools">
                                <i title="取消收藏" v-if="scope.row.isFavour" @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-on"></i>
                                <i title="收藏" v-else @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-off"></i>
                                <i title="分享" @click.stop="showShareOperation(scope.$index)" class="shareTarg iconfont">&#xe678;</i>
                                <div class="share" v-if="scope.row.showShare">
                                    <img class="hoverHand shareItem" title="分享到微博" @click="shareItem('sina',$event);" src="@/images/WEIBO.png">
                                    <img class="hoverHand shareItem" title="分享到微信" @click.stop="shareItem('wx',$event);" src="@/images/WEIXIN.png">
                                    <img class="hoverHand shareItem" title="分享到QQ" @click="shareItem('qq',$event);" src="@/images/QQ.png">
                                </div>
                                <div v-show="scope.row.erweimaShare" class="erweima_share"></div>
                                <div v-show="scope.row.erweimaShare1" class="erweima_share1"></div>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
登入後複製

JS程式碼：

//點選清空條件，呼叫該方法
emptyAndSearch(){//清空條件方法
			//清空樹選中狀態
			this.clearTreeNodeCheck(['tree']);
			//清除排序
			this.$refs.multipleSelection.clearSort();
			//設定分頁引數
			this.queryParam = {
				startRow : 1,
                pageSize : 20,
                condition:{
                }
			}
			//分頁查詢呼叫
			this.confirmSearch('statistics');
			//設定清空條件為false
			this.$store.commit('valueDryGoodDatas/SET_CLEAR_ALL',false);
		}
登入後複製

例子3:

Vue程式碼：

 <el-form-item
                          ref="goodPicInfoFormpicUrl"
                          :label="$t('許可證證照')"
                          class="is-required"
                          prop="picUrl">
                          <el-upload
                            :show-file-list="false"
                            :http-request="uploadImg"
                            :data="certImgform"
                            action=""
                            class="avatar-uploader">
                            <img
                              v-if="queryFrom.picUrl"
                              :src="queryFrom.picUrl"
                              class="avatar">
                            <i
                              v-else
                              class="el-icon-plus avatar-uploader-icon"/>
                          </el-upload>
                          <el-button
                            type="primary"
                            plain
                            size="mini"
                            @click="viewPcPic(queryFrom.picUrl)">{{ $t('檢視') }}</el-button>
                        </el-form-item>
登入後複製

JS程式碼：

      //獲取元素清除驗證
              this.$refs.goodPicInfoFormpicUrl.clearValidate()
登入後複製

一般來講，想獲取INPUT框，首先在獲取DOM元素，需document.querySelector（".input1"）獲取這個dom節點，然後在獲取input1的值。

但是用ref繫結之後，我們就不需要在獲取dom節點了，直接在上面的input上繫結input1，然後$refs裡面呼叫就行。

然後在javascript裡面這樣呼叫：this.$refs.input1 這樣就可以減少獲取dom節點的消耗了

（學習視訊分享：、）

以上就是vue的$refs是什麼意思的詳細內容，更多請關注TW511.COM其它相關文章！